vue级联选择器的getCheckedNodes使用方式
作者：施玥喵
这篇文章主要介绍了vue级联选择器的getCheckedNodes使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vue级联选择器的getCheckedNodes
<el-cascader
:options="menudata"
:props="defaultPropsa"
v-model="val"
clearable
@change="menuchange"
></el-cascader>
data(){
return{
defaultPropsa: {
//三级联动
children: "children",
label: "label",
value: "id",
checkStrictly: true
},
menudata: [], //三级联动data
val: [],
vals: [],
}
}
methods:{
//三级联动
async getmenudata() {
const { data: res } = await this.$http.get("ruixing/chanPinJiaoFuAll"); //接口数据
// console.log(res.data);
this.menudata = res.data;
},
//element组件里的 getCheckedNodes 获取选中的节点
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;
});
},
//三级联动change事件
menuchange() {
this.vals = this.getCascaderObj(this.val, this.menudata); //选中节点数据
console.log(this.vals)
},
}
效果
Element-UI el-tree报错getCheckedNodes is not a function
按照element上的文档来使用element 里面的树形组件
使用后 突然发现报错
“TypeError: this.$refs.tree.getCheckedNodes is not a function”
黑.人 问号脸？？？
排查原因
把 ref 打印一下 发现竟然有五个tree
突然想到 el-tree 是通过for 循环出来的 所以造成了有五个 一样的ref
知道原因就好解决了
解决方案一
只获取某个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);
},
这样就可以啦~
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。