树形结构表vue-table-with-tree-grid的使用

1.安装

2.在main.si中导入使用

//全局使用
import Vue from 'vue'
import TreeTable from 'vue-table-with-tree-grid'
 
Vue.use(TreeTable)
           

或者：

import TreeTable from 'vue-table-with-tree-grid'
Vue.component('tree-table', TreeTable)
           

3.使用组件展示分类数据

//分类表格
//: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">

//主要看上面的树形代码
 <!-- 是否有效自定义插槽 -->
        <template slot="isOk" slot-scope="scope">
          <div>
            <i class="el-icon-success" style="color: lightgreen"
              v-if="scope.row.cat_deleted === false"></i>
            <i class="el-icon-error" style="red" v-else></i>
          </div>
        </template>
        <!-- 排序自定义插槽 -->
        <template slot-scope="scope" slot="order">
          <el-tag type="primary" v-if="scope.row.cat_level === 0">一级</el-tag>
          <el-tag type="success" v-if="scope.row.cat_level === 1">二级</el-tag>
          <el-tag type="warning" v-if="scope.row.cat_level === 2">三级</el-tag>
        </template>
        <!-- 操作自定义插槽 -->
        <template slot="handle">
          <el-button size="mini" type="primary" icon="el-icon-edit">编辑</el-button>
          <el-button size="mini" type="danger" icon="el-icon-delete">删除</el-button>
        </template>
</tree-table>
           

data中：

data(){
return {
//发请求时需要用到的参数
qureInfo: {
        type: 3, // 这个是传递给后端，所我们要几级分类的数据
        pagenum: 1, //这个是分页必须要用的 当前页码值
        pagesize: 5, // 这个是分页插件 每页显示的数据条数
      },
 cateList: [],
 columns: [
        { label: "分类名称", prop: "cat_name",},
        {label: "是否有效",prop: "cat_deleted",type: "template",template: "isOk",},
        {label: "排序",type: "template",template: "order",},
        {label: "操作",type: "template",template: "handle",},
      ],
  }
}
           

更多属性请参考：https://www.npmjs.com/package/vue-table-with-tree-grid