接上篇《37、商品分类功能介绍和基本结构搭建》
上一篇我们完成了商品分类模块的介绍和基本结构的搭建，本篇我们来完成商品分类的树形结构效果。
需要实现的整体效果如下：
这个树形结构组件ElementUI是没有提供的，我们需要依赖第三方插件来完成。
一、安装tree-table组件
我们打开VUE的可视化面板（在cmd控制台输入“vue ui”指令，如何安装之前在环境搭建时讲解过），找到“依赖”模块，点击右上角“安装依赖”：
在对话框中，在“运行依赖”下搜索“vue-table-with”插件（可以点价“查看详情”查看官方源码和示例）：
安装完毕后会在依赖列表看到此插件：
安装完成后，我们需要在项目中引入插件。我们在main.js的头部区域，通过import引入该插件，然后在下方使用vue.component将其注册为全局可用的组件，并命名为“tree-table”：
import TreeTable from 'vue-table-with-tree-grid'
Vue.component('tree-table',TreeTable);二、使用tree-table组件
组件注册完毕后，我们在Cate.vue中使用该组件，在原来留好的“表格区域”放置该组件标签“<tree-table>”：
<template>
? ? <div>
? ? ? ? <!-- 面包屑导航 -->
? ? ? ? <el-breadcrumb separator-class="el-icon-arrow-right">
? ? ? ? <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
? ? ? ? <el-breadcrumb-item>商品管理</el-breadcrumb-item>
? ? ? ? <el-breadcrumb-item>商品分类</el-breadcrumb-item>
? ? ? ? </el-breadcrumb>
? ? ? ? <!-- 卡片视图 -->
? ? ? ? <el-card>
? ? ? ? ? ? <el-row>
? ? ? ? ? ? ? ? <el-row>
? ? ? ? ? ? ? ? ? ? <el-button type="primary">添加分类</el-button>
? ? ? ? ? ? ? ? </el-row>
? ? ? ? ? ? </el-row>
? ? ? ? ? ? <!-- 表格区域 -->
? ? ? ? ? ? <tree-table></tree-table><!-- 树形组件 -->
? ? ? ? ? ? <!-- 分页区域 -->
? ? ? ? </el-card>
? ? </div>
</template>tree-table的使用我们可以查看官方文档（https://github.com/MisterTaki/vue-table-with-tree-grid），主页有介绍和API表格，master分支下有一个demo可以供我们学习：
这里就不再一一带领大家学习了，我们直接开始写。
首先我们需要通过“:data”来绑定需要展示的数据对象；“columns”是绑定的表格各列的配置对象，可以配置各列的名称、属性名、对齐方式和宽度等：
官方的columns写法如下：
columns: [
? {
?? ?label: 'name',
?? ?prop: 'name',
?? ?width: '400px',
? },
? {
?? ?label: 'sex',
?? ?prop: 'sex',
?? ?minWidth: '50px',
? },
? {
?? ?label: 'score',
?? ?prop: 'score',
? },
? {
?? ?label: 'likes',
?? ?prop: 'likes',
?? ?minWidth: '200px',
?? ?type: 'template',
?? ?template: 'likes',
? },
]三、实现商品分类基本树形效果
我们在Cate组件中编辑tree-table，添加data和columns绑定，其中的catelist是上一篇我们访问后拿到的商品分类对象数组，columns对象就是列定义对象：
<!-- 表格区域 --><!-- 树形组件 -->
<tree-table :data="catelist" :columns="columns">
</tree-table>我们在数据区定义columns对象：
columns: [
? ? {
? ? ? ? label: '分类名称',
? ? ? ? prop: 'cat_name'
? ? }
]此时我们就实现了最基本的分类指标树形展示了，查看页面：
去除前面的复选框，在标签中添加“selection-type="false"”就可以了；去除展开行使用“expand-type="false"”，然后再使用“show-index="true"”添加默认行号，使用“:border="true"”添加一个列与列之前的分隔线。
<tree-table :data="catelist" :columns="columns"?
? ? :selection-type="false" :expand-type="false" :show-index="true" :border="true">
</tree-table>效果：
四、实现商品分类“是否有效”效果
在原来的效果图中，商品分类有一个“是否有效”的列，会根据数据对象中的“cat_deleted”字段进行渲染没，如果为“false”代表没有被删除，则显示为绿色对勾，反之限制为红色小叉叉：
根据前面的经验，我们要使用作用域插槽来实现这个效果，那么在tree-table中如何实现呢？
我们可以在columns列定义对象中，使用“type”来指定该列为自定义模板列，然后使用“template”属性指定插槽的名称。这里我们将“是否有效”字段定义为模板列：
//为table指定列的定义
columns: [
? ? {
? ? ? ? label: '分类名称',
? ? ? ? prop: 'cat_name'
? ? },
? ? {
? ? ? ? label: '是否有效',
? ? ? ? prop: 'cat_deleted',
? ? ? ? //表示将当前列定义为模板列
? ? ? ? type: 'template',
? ? ? ? //表示当前这一列使用模板名称
? ? ? ? template: 'isok'
? ? }
]然后在上面的tree-table组件中，添加一个template标签，然后添加作用域插槽scope：
<!-- 表格区域 --><!-- 树形组件 -->
<tree-table :data="catelist" :columns="columns"?
? ? :selection-type="false" :expand-type="false" :show-index="true" :border="true">
? ? <template slot="isok" slot-scope="scope">
? ? ? ??
? ? </template>
</tree-table>我们在elementUI中找到icon图标，复制一个对勾和叉叉的图标：
?
<i class="el-icon-success"></i>
<i class="el-icon-error"></i>我们根据是否有效的图标显示，根据其值是true还是false进行不同的显示：
<!-- 表格区域 --><!-- 树形组件 -->
<tree-table :data="catelist" :columns="columns"?
? ? :selection-type="false" :expand-type="false" :show-index="true" :border="true">
? ? <template slot="isok" slot-scope="scope">
? ? ? ? <i class="el-icon-success" v-if="scope.row.cat_deleted === false" style="color:green"></i>
? ? ? ? <i class="el-icon-error" v-else style="color:red"></i>
? ? </template>
</tree-table>保存后我们查看效果：
至此，商品分类树形表格已经实现了。
下一篇我们讲解“排序”和“操作”列的渲染。
参考：黑马程序员（www.itheima.com）Vue项目实战教学视频
转载请注明出处：https://blog.csdn.net/u013517797/article/details/123313864