element ui 的級(jí)聯(lián)選擇器只能用?value label 來(lái)渲染，而往往后端發(fā)給我們的數(shù)據(jù)并不是按照這個(gè)來(lái)命名的，所以element ui給我們提供了Props來(lái)進(jìn)行配置

但鑒于本人水平有限，往往配置后只能渲染一層或者兩層，搞的我十分吐血，所以，我選擇了更直接粗暴的方式，直接把后端提供給我們的數(shù)據(jù)改為value label。

let arr = [{id: 1,title: "德育",children: [{id: 6,title: "愛(ài)國(guó)守信",children: [{id: 16,title: "擔(dān)任護(hù)旗手，完成升國(guó)旗任務(wù)",},{id: 17,title: "未誠(chéng)實(shí)守信、撒謊",},],},{id: 7,title: "安全守紀(jì)",},{id: 8,title: "文明禮儀",},{id: 9,title: "勤儉節(jié)約",},{id: 10,title: "友愛(ài)互助",},],},{id: 2,title: "智育",children: [{id: 11,title: "踴躍展示",},{id: 12,title: "勤奮學(xué)習(xí)",},],},{id: 3,title: "體育",children: [{id: 13,title: "運(yùn)動(dòng)健康",},],},{id: 4,title: "美育",children: [{id: 14,title: "審美藝術(shù)",},],},{id: 5,title: "勞育",children: [{id: 15,title: "實(shí)踐創(chuàng)新",},],},];

上面是一個(gè)模擬后臺(tái)發(fā)過(guò)來(lái)的數(shù)據(jù)

直接換！

const mapTree = (org) => {const haveChildren =Array.isArray(org.children) && org.children.length > 0;return {value: org.id,label: org.title,children: haveChildren ? org.children.map((i) => mapTree(i)) : [],};};resultArr = arr.map((org) => mapTree(org));console.log(resultArr);

數(shù)據(jù)就完成置換了

總結(jié)

以上是生活随笔為你收集整理的element ui 级联选择器，渲染后不显示数据的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。