Vue Element UI 中 el-table 树形数据 tree-props 多层级使用避坑指南
更新时间：2024年01月26日 11:55:26 作者：蓝胖子的多啦A梦
这篇文章主要介绍了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。支持子节点数据异步加载。
设置 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: 1669613688280
enabled: true
groupId: ""
groupName: ""
h: 8
humidity: ""
id: "21"
labelId: ""
labelName: ""
posName: "C1"
priority: 1
storageId: "1"
temperature: ""
used: true
w: 7
warmPos: 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 弄'
}]
}
},实现效果
到此这篇关于Vue Element UI 中 el-table 树形数据 tree-props 多层级使用避坑的文章就介绍到这了,更多相关Element UI 树形数据 tree-props使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
本文主要介绍了FastApi+Vue+LayUI实现前后端分离的示例代码，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-11-11
Vue.js 是一套构建用户界面的框架，**只关注视图层**，它不仅易于上手，还便于与第三方库或既有项目整合。这篇文章主要介绍了vue 的基本语法和常用指令,需要的朋友可以参考下2019-07-07
本文主要介绍了vue样式穿透的几种方式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-06-06
本篇文章主要介绍关于vue-resource报错450的解决方案，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-07-07
这篇文章主要为大家详细介绍了vue如何使用原生高德地图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-02-02
本文主要介绍了Vue实现DOM元素拖放互换位置示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-01-01
本文主要介绍了vue3组件库添加脚本的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2024-06-06
这篇文章主要为大家详细介绍了Vue图片放大镜组件的封装，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-08-08
这篇文章主要介绍了Vue父子组建的简单通信之控制开关Switch的实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-06-06
VUE table表格动态添加一列数据,新增的这些数据不可以编辑（v-model绑定的数据不能实时更新）
这篇文章主要介绍了VUE table表格动态添加一列数据,新增的这些数据不可以编辑（v-model绑定的数据不能实时更新）,本文通过实例代码给大家介绍的非常详细，需要的朋友可以参考下2020-04-04
最新评论