element ui 的級聯選擇器只能用?value label 來渲染，而往往后端發給我們的數據并不是按照這個來命名的，所以element ui給我們提供了Props來進行配置

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

let arr = [{id: 1,title: "德育",children: [{id: 6,title: "愛國守信",children: [{id: 16,title: "擔任護旗手，完成升國旗任務",},{id: 17,title: "未誠實守信、撒謊",},],},{id: 7,title: "安全守紀",},{id: 8,title: "文明禮儀",},{id: 9,title: "勤儉節約",},{id: 10,title: "友愛互助",},],},{id: 2,title: "智育",children: [{id: 11,title: "踴躍展示",},{id: 12,title: "勤奮學習",},],},{id: 3,title: "體育",children: [{id: 13,title: "運動健康",},],},{id: 4,title: "美育",children: [{id: 14,title: "審美藝術",},],},{id: 5,title: "勞育",children: [{id: 15,title: "實踐創新",},],},];

上面是一個模擬后臺發過來的數據

直接換！

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);

數據就完成置換了

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。