<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)
},
}
效果
