位置: IT常识 - 正文

Vue Element UI 中 el-table 树形数据 tree-props 多层级使用避坑

编辑：rootadmin

推荐整理分享Vue Element UI 中 el-table 树形数据 tree-props 多层级使用避坑，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:,内容如对您有帮助，希望把文章链接给更多的朋友！

实现效果： element官网提示设置tree-props为{children: ‘children’,hasChildren: ‘hasChildren’}，data数据需要设置children和hasChildren属性，row-key也绑定了数据的唯一值变量id，但是树形结构的第三级就是出不来

如图

可以看到只有第二级，第三级并没有，于是查看了数据格式，和官方要求的也是一样的呢，但是第三层级就是不展示

最后发现

在el-table中，支持树类型的数据的显示。当 row 中包含 children 字段时，被视为树形数据。渲染树形数据时，必须要指定 row-key。支持子节点数据异步加载。

Vue Element UI 中 el-table 树形数据 tree-props 多层级使用避坑

设置 Table 的 lazy 属性为 true 与加载函数 load 。通过指定 row 中的 hasChildren 字段来指定哪些行是包含子节点。children 与 hasChildren 都可以通过 tree-props 配置。

default-expand-all属性表示默认展开，不需要展开可以删除。row-key="id" 和 row里面的属性有children字段(即数据里面需要有children字段) 是必须的，:tree-props="{children: ‘children’,hasChildren: ‘hasChildren’}可有可无。

如果不是懒加载的话，后端不要设置hasChildren 这个属性，要不然树形不能显示；如果是懒加载，则需要设置hasChildren字段。

错误代码：因为我的数据不是懒加载，所以不需要添加后面的 hasChildren: 'hasChildren' 配置并且在组装数据格式时，也不需要加上 hasChildren=true / hasChildren=false 的字段

完整代码：

<el-table :header-cell-style="{ color: '#FFF', background: '#333' }" :cell-style="{ color: '#FFF', background: '#333' }" row-key="id" :data="tableData" style="width: 100%" :default-sort="{ prop: '', order: '' }" @sort-change="sortChange" :tree-props="{ children: 'children' }" > <template slot="empty"> <span style="color: #969799">{{ $t("NeoLight.empty") }}</span> </template> <el-table-column prop="barcode" :sortable="true" :label="$t('NeoLight.barcodeNo')" width="180" /> <el-table-column prop="partNumber" :sortable="true" label="料号" width="150" /> <el-table-column prop="warehouseCode" :sortable="true" label="库别" width="150" /> <el-table-column prop="batch" :sortable="true" :label="$t('barcode.batch')" /> <el-table-column prop="provider" :sortable="true" :label="$t('storagePos.providerNumber')" /> <el-table-column prop="posName" :sortable="true" :label="$t('NeoLight.storageNo')" /> <el-table-column prop="dateCode" :sortable="true" label="DC" /> <el-table-column prop="reelAmount" :sortable="true" label="卷数" /> <el-table-column prop="amount" :sortable="true" :label="$t('NeoLight.amount')" /> <el-table-column prop="firstPutInDate" :sortable="true" :label="$t('NeoLight.firstPutInDate')" /> <el-table-column prop="putInDate" :sortable="true" :label="$t('NeoLight.putInDate')" /> </el-table>

接口返回的数据为二级数据格式但是table表格中要展示三个层级需要前端自己来处理组装需要的格式（有和我一样的小伙伴，可以让后端组装好格式返回噢）

let list = [ {canCheckOutTime: 1669613688280enabled: truegroupId: ""groupName: ""h: 8humidity: ""id: "21"labelId: ""labelName: ""posName: "C1"priority: 1storageId: "1"temperature: ""used: truew: 7warmPos: false}, { barcode: { amount: 23000, barcode: "CS0004", batch: "", children: [ { amount: 3000, barcode: "M150171314022J1RV", batch: "A436105244", createDate: "2022-12-01 15:55:32", dateCode: "2209", firstPutInDate: "2022-12-01 15:55:33", fullCode: "152S01563-017131|A436105244-2209|3000|M150171314022J1RV|TAIYO|4101546111011J1007FS", height: 8, id: "92", initialAmount: 0, labelAmount: 3000, maxStorageTime: 0, mixTime: 0, onlySingleOut: false, partNumber: "152S01563", partitionCount: 1, plateSize: 7, posName: "CS0004-1", provider: "TAIYO", providerNumber: "017131", putInDate: "2022-12-01 15:55:33", putInTime: 1669881333306, putInTimeStr: "2022-12-01 15:55:306", reelAmount: 1, relationCodes: [], size: "7X8", solder: false, solderStatus: 0, startWarmTime: -1, status: 0, thickness: "", type: 0, updateDate: "2022-12-01 15:55:33", used: false, usedCount: 0, warehouseCode: "W10B", warmTime: 0, }, { amount: 10000, barcode: "A1179700142220JB6S", batch: "TPA2233000KP", createDate: "2022-12-01 15:56:01", dateCode: "2022080", firstPutInDate: "2022-12-01 15:56:02", fullCode: "118S0176-797001|TPA2233000KP-20220807|10000|A1179700142220JB6S|CYNTEC|TPA2233000KP0000JB6S", height: 8, id: "95", initialAmount: 0, labelAmount: 10000, maxStorageTime: 0, mixTime: 0, onlySingleOut: false, partNumber: "118S0176", partitionCount: 2, plateSize: 7, posName: "CS0004-2", provider: "CYNTEC", providerNumber: "797001", putInDate: "2022-12-01 15:56:02", putInTime: 1669881362306, putInTimeStr: "2022-12-01 15:56:306", reelAmount: 1, relationCodes: [], size: "7X8", solder: false, solderStatus: 0, startWarmTime: -1, status: 0, thickness: "", type: 0, updateDate: "2022-12-01 15:56:02", used: false, usedCount: 0, warehouseCode: "W10B", warmTime: 0, }, { amount: 10000, barcode: "A1179700142220JB7L", batch: "TPA2233000KP", createDate: "2022-12-01 15:56:06", dateCode: "2022080", firstPutInDate: "2022-12-01 15:56:07", fullCode: "118S0176-797001|TPA2233000KP-20220807|10000|A1179700142220JB7L|CYNTEC|TPA2233000KP0000JB7L", height: 8, id: "96", initialAmount: 0, labelAmount: 10000, maxStorageTime: 0, mixTime: 0, onlySingleOut: false, partNumber: "118S0176", partitionCount: 2, plateSize: 7, posName: "CS0004-2", provider: "CYNTEC", providerNumber: "797001", putInDate: "2022-12-01 15:56:07", putInTime: 1669881367304, putInTimeStr: "2022-12-01 15:56:304", reelAmount: 1, relationCodes: [], size: "7X8", solder: false, solderStatus: 0, startWarmTime: -1, status: 0, thickness: "", type: 0, updateDate: "2022-12-01 15:56:07", used: false, usedCount: 0, warehouseCode: "W10B", warmTime: 0, }, ], createDate: "2022-12-01 15:55:05", firstPutInDate: "2022-12-01 16:29:47", fullCode: "CS0004-1", height: 8, id: "90", initialAmount: 0, labelAmount: 0, maxStorageTime: 0, mixTime: 0, onlySingleOut: false, outOpor: "", partNumber: "CS", partitionCount: 0, plateSize: 7, posName: "B19", putInDate: "2022-12-02 14:05:57", putInTime: 1669883387333, putInTimeStr: "2022-12-01 16:29:333", reelAmount: 3, relationCodes: [], size: "7X8", solder: false, solderStatus: 0, startWarmTime: -1, status: 0, subCodeList: [ ], thickness: "", type: 0, updateDate: "2022-12-02 14:05:57", used: true, usedCount: 4, usedDate: "2022-12-01 17:03:30", warmTime: 0, }, canCheckOutTime: 1669961157870, enabled: true, groupId: "", groupName: "", h: 8, humidity: "", id: "59", labelId: "", labelName: "", posName: "B19", priority: 19, storageId: "3", temperature: "", used: true, w: 7, warmPos: false, }, ];

可以看出

有的数据中没有children字段，有的有children字段后端返回的树形结构数据一个二级数据格式，还需要前端处理，将children中每一条数据里的 posName 字段值取出来并赋值给一个 barcode 的新字段加上id 组成第二级数据，后端返回的第二层级数据作为树形结构的第三层级数据使用

js代码 methods: { //从接口中获取数据 getList() { let data = this.query; outerInventory(data).then((res) => { this.pageLength = res.totalElements; this.changeTableJson(res.content); //调用组装数据方法 }); }, // 组装表格需要的数据格式 changeTableJson(listArray) { if (!this.isLoading) { const list2 = []; for (let jsonElement of listArray) { if (!jsonElement.barcode || !jsonElement.barcode.children) { list2.push(jsonElement); continue; } jsonElement.barcode.children = jsonElement.barcode.children.map( (item) => { if (item.barcode) { let temp = JSON.parse(JSON.stringify(item)); return { id: Math.floor(Math.random() * 1000) + "", barcode: item.posName, children: [temp], }; } } ); list2.push(jsonElement.barcode); } this.tableData = list2; this.isLoading = true; console.log(list2); } },}三级树形结构官方例子<el-table :data="tableData1" style="width: 100%" row-key="id" :tree-props="{children: 'children'}"> <el-table-column prop="date" label="日期" width="180"> </el-table-column> <el-table-column prop="name" label="姓名" width="180"> </el-table-column> <el-table-column prop="address" label="地址"> </el-table-column> </el-table>data() { return { tableData1: [{ id: 1, date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { id: 2, date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1517 弄', children: [ { id: 31, date: '2020-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1519 弄', children: [ { id: 33, date: '2020-05-32', name: '王小虎', address: '上海市普陀区金沙江路 1519 弄' } ] }, { id: 32, date: '2020-05-32', name: '王小虎', address: '上海市普陀区金沙江路 1519 弄', children: [ { id: 34, date: '2020-05-32', name: '王小虎', address: '上海市普陀区金沙江路 1519 弄' } ] } ] }, { id: 3, date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1519 弄', }, { id: 4, date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1516 弄' }] } },实现效果