vue級(jí)聯(lián)選擇器的getCheckedNodes使用方式
vue級(jí)聯(lián)選擇器的getCheckedNodes
<el-cascader
:options="menudata"
:props="defaultPropsa"
v-model="val"
clearable
@change="menuchange"
></el-cascader>
data(){
return{
defaultPropsa: {
//三級(jí)聯(lián)動(dòng)
children: "children",
label: "label",
value: "id",
checkStrictly: true
},
menudata: [], //三級(jí)聯(lián)動(dòng)data
val: [],
vals: [],
}
}
methods:{
//三級(jí)聯(lián)動(dòng)
async getmenudata() {
const { data: res } = await this.$http.get("ruixing/chanPinJiaoFuAll"); //接口數(shù)據(jù)
// console.log(res.data);
this.menudata = res.data;
},
//element組件里的 getCheckedNodes 獲取選中的節(jié)點(diǎn)
getCascaderObj(val, opt) {
return val.map(function(value, index, array) {
for (var itm of opt) {
if (itm.id == value) {
opt = itm.children;
return itm;
}
}
return null;
});
},
//三級(jí)聯(lián)動(dòng)change事件
menuchange() {
this.vals = this.getCascaderObj(this.val, this.menudata); //選中節(jié)點(diǎn)數(shù)據(jù)
console.log(this.vals)
},
}
效果


Element-UI el-tree報(bào)錯(cuò)getCheckedNodes is not a function
按照element上的文檔來使用element 里面的樹形組件

使用后 突然發(fā)現(xiàn)報(bào)錯(cuò)
“TypeError: this.$refs.tree.getCheckedNodes is not a function”
黑.人 問號(hào)臉???

排查原因
把 ref 打印一下 發(fā)現(xiàn)竟然有五個(gè)tree

突然想到 el-tree 是通過for 循環(huán)出來的 所以造成了有五個(gè) 一樣的ref
知道原因就好解決了
解決方案一
只獲取某個(gè)tree里面的值
this.$refs.tree[0].getCheckedNodes();
解決方案二
<el-tree
:props="defaultProps"
:data="item.children"
node-key="id"
ref="tree"
show-checkbox
@check="(click, checked)=>{handleCheckChange(click, checked)}"
>
</el-tree>
handleCheckChange(data, checked,) {
console.log(checked.checkedKeys);
console.log("全選",checked.checkedNodes);
console.log(checked.halfCheckedKeys);
console.log("半選",checked.halfCheckedNodes);
},
這樣就可以啦~
總結(jié)
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
element-ui樹形控件后臺(tái)返回的數(shù)據(jù)+生成組織樹的工具類
這篇文章主要介紹了element-ui樹形控件后臺(tái)返回的數(shù)據(jù)+生成組織樹的工具類,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
淺談vue2 單頁面如何設(shè)置網(wǎng)頁title
這篇文章主要介紹了淺談vue2 單頁面如何設(shè)置網(wǎng)頁title,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-11-11
vue 通過 mqtt 實(shí)現(xiàn)實(shí)時(shí)接收消息的操作方法
?MQTT是一種基于發(fā)布/訂閱模式的輕量級(jí)消息協(xié)議,適用于硬件性能有限的遠(yuǎn)程設(shè)備和網(wǎng)絡(luò)狀況不佳的環(huán)境,這篇文章主要介紹了vue 通過 mqtt 實(shí)現(xiàn)實(shí)時(shí)接收消息,需要的朋友可以參考下2024-12-12
前端批量請(qǐng)求失敗Toast重復(fù)彈窗該如何解決(面試題)
Toast彈出框是一種輕量級(jí)的消息提示框,通常用于顯示非緊急的信息或狀態(tài)更新,這篇文章主要介紹了前端批量請(qǐng)求失敗Toast重復(fù)彈窗該如何解決的相關(guān)資料,需要的朋友可以參考下2026-04-04
vue項(xiàng)目實(shí)現(xiàn)m3u8流媒體播放詳細(xì)圖文教程
m3u8是一種常用的視頻流媒體格式,通常用于在Web上播放視頻,這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目實(shí)現(xiàn)m3u8流媒體播放的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-09-09
Vue Tour封裝實(shí)現(xiàn)統(tǒng)一的頁面引導(dǎo)組件
項(xiàng)目開發(fā)過程中需要實(shí)現(xiàn)用戶引導(dǎo)功能,經(jīng)過調(diào)研發(fā)現(xiàn)一個(gè)好用的 Vue 插件 vue-tour,下面我們就來看看如何基于 vue-tour 封裝一個(gè)統(tǒng)一的引導(dǎo)組件吧2025-05-05

