使用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'ponent('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’的数据赋给cateListthis.cateList = res.data.result;},},