el-table?樹(shù)形數(shù)據(jù)?tree-props?多層級(jí)使用避坑
更新時(shí)間：2023年08月30日 10:31:54 作者：藍(lán)胖子的多啦A夢(mèng)
本文主要介紹了el-table?樹(shù)形數(shù)據(jù)?tree-props?多層級(jí)使用避坑,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
實(shí)現(xiàn)效果：
element官網(wǎng)提示設(shè)置tree-props為{children: ‘children’,hasChildren: ‘hasChildren’}，data數(shù)據(jù)需要設(shè)置children和hasChildren屬性，row-key也綁定了數(shù)據(jù)的唯一值變量id，但是樹(shù)形結(jié)構(gòu)的第三級(jí)就是出不來(lái)
如圖
可以看到只有第二級(jí)，第三級(jí)并沒(méi)有，于是查看了數(shù)據(jù)格式，和官方要求的也是一樣的呢，但是第三層級(jí)就是不展示
最后發(fā)現(xiàn)
在el-table中，支持樹(shù)類型的數(shù)據(jù)的顯示。當(dāng) row 中包含 children 字段時(shí)，被視為樹(shù)形數(shù)據(jù)。渲染樹(shù)形數(shù)據(jù)時(shí)，必須要指定 row-key 。支持子節(jié)點(diǎn)數(shù)據(jù)異步加載。
設(shè)置 Table 的 lazy 屬性為 true 與加載函數(shù) load 。通過(guò)指定 row 中的 hasChildren 字段來(lái)指定哪些行是包含子節(jié)點(diǎn)。 children 與 hasChildren 都可以通過(guò) tree-props 配置。
default-expand-all 屬性表示默認(rèn)展開(kāi)，不需要展開(kāi)可以刪除。 row-key="id" 和 row 里面的屬性有 children 字段(即數(shù)據(jù)里面需要有 children 字段) 是必須的，:tree-props="{children: ‘children’,hasChildren: ‘hasChildren’}可有可無(wú)。
如果不是 懶加載 的話，后端不要設(shè)置 hasChildren 這個(gè)屬性，要不然樹(shù)形不能顯示； 如果是懶加載，則需要設(shè)置 hasChildren 字段。
錯(cuò)誤代碼：
因?yàn)槲业臄?shù)據(jù)不是懶加載，所以不需要添加后面的 hasChildren: 'hasChildren' 配置
并且在組裝數(shù)據(jù)格式時(shí)，也不需要加上 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="料號(hào)"
width="150"
/>
<el-table-column
prop="warehouseCode"
:sortable="true"
label="庫(kù)別"
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="卷數(shù)" />
<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>接口返回的數(shù)據(jù) 為 二級(jí) 數(shù)據(jù)格式 但是table表格中要展示 三個(gè)層級(jí) 需要前端自己來(lái)處理 組裝需要的格式（有和我一樣的小伙伴，可以讓后端組裝好格式返回噢）
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,
},
];
可以看出
有的數(shù)據(jù)中沒(méi)有 children 字段，有的有 children 字段后端返回的樹(shù)形結(jié)構(gòu)數(shù)據(jù)一個(gè) 二級(jí)數(shù)據(jù)格式 ，還需要前端處理，將 children 中每一條數(shù)據(jù)里的 posName 字段值取出來(lái) 并賦值給一個(gè) barcode 的新字段 加上id 組成第二級(jí)數(shù)據(jù)，后端返回的 第二層級(jí)數(shù)據(jù) 作為 樹(shù)形結(jié)構(gòu)的 第三層級(jí)數(shù)據(jù) 使用
js代碼
methods: {
//從接口中獲取數(shù)據(jù)
getList() {
let data = this.query;
outerInventory(data).then((res) => {
this.pageLength = res.totalElements;
this.changeTableJson(res.content); //調(diào)用組裝數(shù)據(jù)方法
});
},
// 組裝表格需要的數(shù)據(jù)格式
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);
}
},
}三級(jí)樹(shù)形結(jié)構(gòu) 官方例子
<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: '上海市普陀區(qū)金沙江路 1518 弄'
},
{
id: 2,
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1517 弄',
children: [
{
id: 31,
date: '2020-05-01',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1519 弄',
children: [
{
id: 33,
date: '2020-05-32',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1519 弄'
}
]
},
{
id: 32,
date: '2020-05-32',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1519 弄',
children: [
{
id: 34,
date: '2020-05-32',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1519 弄'
}
]
}
]
},
{
id: 3,
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1519 弄',
},
{
id: 4,
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1516 弄'
}]
}
},實(shí)現(xiàn)效果
到此這篇關(guān)于el-table 樹(shù)形數(shù)據(jù) tree-props 多層級(jí)使用避坑的文章就介紹到這了,更多相關(guān)el-table tree-props 多層級(jí)使用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
本篇文章主要介紹了vue使用Axios做ajax請(qǐng)求詳解，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-06-06
基于vue3.0.1beta搭建仿京東的電商H5項(xiàng)目
這篇文章主要介紹了基于vue3.0.1beta搭建仿京東的電商H5項(xiàng)目，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
這篇文章主要為大家介紹了Vue的監(jiān)聽(tīng)屬性，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2021-11-11
這篇文章主要介紹了Vue中ref的用法及演示，ref被用來(lái)給元素或子組件注冊(cè)引用信息。引用信息會(huì)被注冊(cè)在父組件上的$refs對(duì)象上，下面來(lái)看看文章的詳細(xì)內(nèi)容,需要的朋友可以參考一下2021-11-11
vue中v-model指令與.sync修飾符的區(qū)別詳解
本文主要介紹了vue中v-model指令與.sync修飾符的區(qū)別詳解，詳細(xì)的介紹了兩個(gè)的用法和區(qū)別，感興趣的可以了解一下2021-08-08
vue修改數(shù)據(jù)的時(shí)候,表單值回顯不正確問(wèn)題及解決
這篇文章主要介紹了vue修改數(shù)據(jù)的時(shí)候，表單值回顯不正確的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-11-11
vue3.x lodash在項(xiàng)目中管理封裝指令的優(yōu)雅使用
這篇文章主要為大家介紹了vue3.x lodash在項(xiàng)目中管理封裝指令的優(yōu)雅使用示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-09-09
vue computed的set方法無(wú)效問(wèn)題及解決
這篇文章主要介紹了vue computed的set方法無(wú)效問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11
這篇文章主要為大家介紹了Vue的計(jì)算屬性，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2021-11-11
文章介紹了如何在Vue3+Ts項(xiàng)目中使用json-editor-vue3插件,并解決了導(dǎo)入過(guò)程中遇到的模塊識(shí)別問(wèn)題,通過(guò)步驟說(shuō)明和代碼示例,展示了如何在項(xiàng)目中成功引入和使用該插件,并提供了一些常見(jiàn)參數(shù)和事件說(shuō)明2025-01-01