vue+element-ui 树形table

使用vue+element-ui +el-table 实现带树形的表格

实现效果图

 

实现方式：

1.table标签中增加 row-key="rowKey" default-expand-all

其中 row-key是接口中返回的一个属性，最好是不重复，重复后会导致有些地方点击折叠和展开出现问题，

row-key使用属性必须有值不能为空，否则会一直报错row-key is required

default-expand-all 表示默认全部展开

<el-table :data="tableData" row-key="rowKey" default-expand-all :cell-class-name="addClass2">

 

2.接口返回对象中需要包含children属性，用户保存下一级的数据集合，如果不用children属性则需要在表格中指定:tree-props="{children: '接口中返回的存放下一级数据集合的属性名字'}"，

我直接在接口中返回的children的属性，

children属性也必须是个集合,且集合中对象跟list里的对象要是同一个类