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

1、假如遇到了一个需要搭建一个树形结构的表格页面，这时候vue-table-with-tree-grid便可以派上用场。示例如下。

2、如果你是使用vue ui搭建的项目，使用时操作如下;

​ 2.1: 在vue 控制台中点击依赖->安装依赖->运行依赖->输入vue-table-with-tree-gird->点击安装

​ 2.2:打开main.js，导入vue-table-with-tree-grid

import TreeTable from 'vue-table-with-tree-grid'
.....
Vue.config.productionTip = false

2.3:全局注册

//全局注册组件
Vue.component('tree-table', TreeTable)

2.4使用组件展示分类数据

<!-- 分类表格
:data(设置数据源) :columns(设置表格中列配置信息) :selection-type(是否有复选框)
:expand-type(是否展开数据) show-index(是否设置索引列) index-text(设置索引列头)
border(是否添加纵向边框) :show-row-hover(是否鼠标悬停高亮) -->
    
<tree-table :data="cateList" :columns="columns" :selection-type="false"
:expand-type="false" show-index index-text="#" border :show-row-hover="false">

</tree-table>

3、如果你是使用 vue create my-project 搭建项目，使用时操作如下。

​ 3.1：安装

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

3.2:打开main.js，导入vue-table-with-tree-grid

import TreeTable from 'vue-table-with-tree-grid'
    .....
    Vue.config.productionTip = false

 3.3:全局注册

//全局注册组件
Vue.component('tree-table', TreeTable)

3.4使用组件展示分类数据

<!-- 分类表格
:data(设置数据源) :columns(设置表格中列配置信息) :selection-type(是否有复选框)
:expand-type(是否展开数据) show-index(是否设置索引列) index-text(设置索引列头)
border(是否添加纵向边框) :show-row-hover(是否鼠标悬停高亮) -->
    
<tree-table :data="cateList" :columns="columns" :selection-type="false"
:expand-type="false" show-index index-text="#" border :show-row-hover="false">

</tree-table>

使用代码如下

<!-- tree 插件方法 -->
            <!-- 分类表格   所有参数解释
             :data(设置数据源)
             :columns(设置表格中列配置信息)
             :selection-type(是否有复选框)
             :expand-type(是否展开数据)
              show-index(是否设置索引列) 
              index-text(设置索引列头)
              border(是否添加边框) 
             :show-row-hover(是否鼠标悬停高亮)-->
            <tree-table
                :data="categories"
                :columns="columns"
                :selection-type="false"
                :expand-type="false"
                show-index
                index-text="#"
                border
                :show-row-hover="false"
            >
<!-- 是否有效区域， 设置对应的模板列： slot="isOk"(与columns中设置的template一致) -->
                <template slot-scope="scope" slot="isOk">
                    <i
                        class="el-icon-success"
                        style="color: blue"
                        v-if="scope.row.cat_deleted == 0"
                    ></i>
                    <i class="el-icon-error" v-if="scope.row.cat_deleted == 1"></i>
                </template>
                <template slot-scope="scope" slot="sort">
                    <el-tag type="success" v-if="scope.row.cat_level == 0">一级</el-tag>
                    <el-tag type="warning" v-if="scope.row.cat_level == 1">二级</el-tag>
                    <el-tag type="danger" v-if="scope.row.cat_level == 2">三级</el-tag>
                </template>
                <template slot-scope="scope" slot="opt">
                    <el-button size="mini" type="primary" @click="bj(scope.row)">
                        <i class="el-icon-edit">编辑</i>
                    </el-button>
                    <el-button size="mini" type="danger" @click="del(scope.row.cat_id)">
                        <i class="el-icon-delete">删除</i>
                    </el-button>
                </template>
            </tree-table>
<!-- tree 插件方法 -->

//添加列表

<script>
export default {
  data() {
    return {
      //表格数据
            categories: [],
            //columns(设置表格中列配置信息)
            columns: [
                {
                    label: '分类名称',
                    prop: 'cat_name'
                },
                {
                    label: '是否有效',
                    type: 'template',
                    template: 'isOk'
                },
                {
                    label: '排序',
                    type: 'template',
                    template: 'sort'
                },
                {
                    label: '操作',
                    type: 'template',
                    template: 'opt'
                },
            ],
    };
  },
</script>

4、API参数：

 

 

 5、 column配置

 6、Table 事件

 7、Table方法