安装

// 树形组件
npm i vue-table-with-tree-grid

使用

https://github.com/yzsyzs/vue-table-tree-grid

有属性介绍，
在example中有示例

//import Vue from 'vue'
//在main.js中导入
import ZkTable from 'vue-table-with-tree-grid'
//然后再那里使用就通过下面的方法再那个页面单独注册，也可放再main.js中进行全局注册（通过以下方式）
Vue.component("tree-table", ZkTable)
// 全局注册
Vue.use(ZkTable)

<template>
  //data是数据对象
  <tree-table :data="cateData"
        :selection-type="false"
        :expand-type="false"
        show-index
        index-text="#"
        border
        :columns="columns">
        <!-- 通过slot将template与isok模板列串联 -->
        <!-- slot-scope通过这个属性接收这一行的数据 -->
        <template slot="isok" slot-scope="scope">
          <i v-if="!scope.cat_deleted" style="color:lightgreen;" class="el-icon-success"></i>
          <i v-else class="el-icon-error" style="color:red;"></i>
        </template>
        <template slot="sort" slot-scope="scope">
          <el-tag v-if="scope.row.cat_level === 0">标签一</el-tag>
          <el-tag v-else-if="scope.row.cat_level === 1" type="success">标签二</el-tag>
          <el-tag v-else type="warning">标签三</el-tag>
        </template>
        <template slot="actions" slot-scope="scope">
          <el-button type="primary" 
            @click="cateEditDiagonal(scope.row)"
            size="mini">编辑</el-button>
          <el-button type="danger" 
            @click="cateDeleteDiagonal(scope.row)"
            size="mini">删除</el-button>
        </template>
      </tree-table>
</template>
data(){
  return {
    // 分类数据对象
      cateData:[],
    columns:[
          {
          // 列标题
          label:'分类名称',
          // 指定数据名称
          prop:'cat_name',
        },
        {
            label: '是否有效',
            prop: 'cat_deleted',
            // 将这一列指定为自定义模板列
            type: 'template',
            // 模板列的名称市likes，在表格组件中通过template组件注册这个模板
            template: 'isok',
        },
        {
            label: '排序',
            prop: 'cat_level',
            // 将这一列指定为自定义模板列
            type: 'template',
            // 模板列的名称市likes，在表格组件中通过template组件注册这个模板
            template: 'sort',
        },
        {
            label: '操作',
            // 将这一列指定为自定义模板列
            type: 'template',
            // 模板列的名称市likes，在表格组件中通过template组件注册这个模板
            template: 'actions',
        }
      ],
  }
}