2021-06-01

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

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

2、安装插件：

npm install vue-table-with-tree-grid

3.配置插件在main.js文件里

// 直接配置
import Vue from 'vue'
import ZkTable from 'vue-table-with-tree-grid'
 
Vue.use(ZkTable)

或

// 手动配置
import ZkTable from 'vue-table-with-tree-grid'
 
Vue.component('自己取个名字，例(tree-table)', ZkTable)

4、就可以直接上代码了

<template>
  <div>
  	<-- 视图卡片 -->
    <el-card>
      <-- 树形表格 -->
      <tree-table :data="cateList" :columns="columns" :selection-type="false" :expand-type="false" show-index
        index-text="#" border>
       
      </tree-table>
    </el-card>
  </div>  
</template>

5、表格属性之类的可以参考
https://www.npmjs.com/package/vue-table-with-tree-grid