1.安装组件
npm i vue-table-with-tree-grid -S
2.引入组件(在main.js入口文件中引入并注册)
//在入口文件导入树形表格组件import treeTable from 'vue-table-with-tree-grid'
//注册树形表格组件ponent('tree-table', treeTable)
3.使用组件
<!-- 表格区域 --><tree-table :data="cateList" :columns="columns" :selection-type="false" :expand-type="false" :show-index="true"></tree-table>
:data绑定数据源
:columns为表格指定列的定义
:selection-type="false"去除复选框
:expand-type="false"去除展开行
:show-index="true"为表格添加索引列
index-text="#"为索引列自定义标题
border是否显示纵向边框(true表示显示,false表示隐藏)
:show-row-hover="false"鼠标悬停是否高亮(true表示高亮,false表示隐藏)
3.2在vue-table-with-tree-grid树形表格组件中如何使用作用域插槽template
在为指定列定义时,定义type为'template',并定义这一列使用的模板名称为‘isok’
//为table指定列的定义columns: [{label: '分类名称',prop: 'cat_name',},{label: '是否有效',//表示将当前列定义为模板列type: 'template',//表示当前这一列使用的模板名称template:'isok'}],};
在表格中,定义模板template,用slot命名为'isok'
<tree-table:data="cateList":columns="columns":selection-type="false":expand-type="false":show-index="true"index-text="#"border><template slot="isok" slot-scope="scope"><i class="el-icon-success" v-if="scope.row.cat_deleted===false" style="color:lightgreen"></i><i class="el-icon-error" v-else style="color:red"></i></template></tree-table>