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

在vue可视化中安装开发依赖   vue-table-with-tree-grid

具体使用安装好的详情页

https://github.com/MisterTaki/vue-table-with-tree-grid

我使用了第二种方法

import Vue from 'vue'
import ZkTable from 'vue-table-with-tree-grid'

Vue.component(ZkTable.name, ZkTable)

 在main.js中引入在这里我定义名字为tree-table   记得加引号！！

import Vue from 'vue'
// 引入tree-table
import treeTable from 'vue-table-with-tree-grid'
// 注册组件
Vue.component('tree-table', treeTable)

使用了它的多种属性，具体属性作用看链接

 https://github.com/MisterTaki/vue-table-with-tree-grid

   <!-- table表格区域 -->
 <tree-table 
:data="cateList" 
:columns="columns" 
:selection-type="false" 
:expand-type="false" 
show-index 
index-text="#" 
border 
:show-row-hover="false"
>
</tree-table>

关于columns

 // table指定列的定义
            columns:[{
            // 列名
               label:'分类名称',
            // 渲染出来的数据
               prop:'cat_name'
            }

新定义模板列的渲染

  // table指定列的定义
            columns:[{
            // 列名
               label:'分类名称',
            // 渲染出来的数据
               prop:'cat_name'
            },//自定义新的一列
            {
                label:'是否有效',
                type:'template',
                template:'isok'
            },
             {
                label:'排序',
                prop:'cat_level',
                type:'template',
                template:'sort'
            },
             {
                label:'操作',
                type:'template',
                template:'setting'
            }
            ],

渲染

   <!-- table表格区域 -->
     <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">
       <i class="el-icon-circle-check" style="color:lightgreen" v-if="scope.row.cat_deleted===false"></i>
       <i class="el-icon-circle-close"  style="color:red" v-else></i>
      </template>
    <!-- 自定义的一列 排序 指定渲染的一列和使用插槽-->
      <template slot="sort" slot-scope="scope">
       <el-tag size="small"   v-if="scope.row.cat_level===0">一级</el-tag>
       <el-tag size="small" type="success"   v-else-if="scope.row.cat_level===1">二级</el-tag>
       <el-tag size="small" type="warning"  v-else>三级</el-tag>
      </template>
  <!-- 自定义的一列 操作 指定渲染的一列和使用插槽-->
      <template slot="setting" >
        <el-button size="small" type="primary" icon="el-icon-edit">编辑</el-button>
        <el-button size="small" type="danger" icon="el-icon-delete">删除</el-button>
      </template>
     </tree-table>