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

1.安装组件

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

2.引入组件（在main.js入口文件中引入并注册）

//在入口文件导入树形表格组件
import treeTable from 'vue-table-with-tree-grid'

//注册树形表格组件
Vue.component('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>