使用vue-table-with-tree-grid树形表格组件

1. 安装

（1）vue ui面板

• 依赖 -> 运行依赖 -> 搜索vue-table-with-tree-grid -> 安装

（2）控制台

npm i vue-table-with-tree-grid -S

2. 配置

• main.js

import TreeTable from 'vue-table-with-tree-grid'
Vue.component('tree-table',TreeTable)	
//tree-table:给要注册的插件起的名字
//TreeTable：要注册的插件

3. 使用

• cate.vue - > <template>

<tree-table
:data="cateList"			//绑定数据列表
:columns="columns"			//绑定行标题数据
:selection-type="false"		//去掉默认的复选框
:expand-type="false"		//去掉展开列
show-index					//添加索引
border						//添加边框线
:show-row-hover="false"		//去掉每一行鼠标移上去时的高亮样式
>
<!-- 定义作用域插槽'isOk' -->
  <template slot="isOk" slot-scope="scope">		//slot-scope="scope"：接收作用域插槽的数据
    <!-- 添加图标 -->
    <!-- 通过v-if/v-else 设置图标什么时候显示 -->
    <!-- cat_deleted:API接口数据中定义的数据 默认为false-->
    <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>

• <script>

data(){
	return{
	  //商品分类列表数据
	  cateList:[],
	  //为table指定列的定义
	  columns:[{
	    label:'分类名称',
	    prop:'cat_name'
	  },{
	    label:'是否有效',
	    //表示将当前列定义为模板列
	    type:'template',
	    //表示当前这一列使用模板名称
	    template:'isOk'
	  }],
	 }
},
created() {
  this.getCateList();
},
methods:{
  //从后台API接口获取数据
  async getCateList(){
    const {data:res} = await this.$http.get('categories'); 
    if(res.meta.status != 200){
      return this.$message.error('商品分类列表数据！');
    }
    //console.log(res.data);
    //把‘res.data.result’的数据赋给cateList
    this.cateList = res.data.result;
  },
},