![](https://img-blog.csdnimg.cn/img_convert/d265b502f78a1fe4c617476bd5856074.png)
使用过程:
npm i vue-table-with-tree-grid -S
Or use yarn:
yarn add vue-table-with-tree-grid
2.在main.js中引入这个依赖插件,引入后需要注册,实例如下
import Vue from 'vue'
import TreeTable from 'vue-table-with-tree-grid'
Vue.component('tree-table', TreeTable)
该项目用到的属性
![](https://img-blog.csdnimg.cn/img_convert/1c7e9dc83675ab306027fd182ba8450a.png)
Columns Configs配置在data中,与上述的colums对应
![](https://img-blog.csdnimg.cn/img_convert/9c41c8a6ab329c15a2bb5313661b81a1.png)
4.在配置columns的时候,
一个lable代表是每一列的第一个值,
prop中的是传递过来的axios的接收过来的值
type: ‘template’,:代表将这一列定义为一个模板
template:是表示这个模板的名称是什么
![](https://img-blog.csdnimg.cn/img_convert/43761c1eda7ca6ab3b3ea19ea41da891.png)
solt-的属性值表示这个模板对应columns中表示的那一列,模板中的数据显示在那一列中
![](https://img-blog.csdnimg.cn/img_convert/59f325ed02206fd88b1d44ce8d997633.png)