el-cascader多选的父子关联和父子不关联功能
公用html:
<el-cascader v-model="data" :options="optionsData" :props="props" clearable>
</el-cascader>
公用js变量:
data () {return {// 绑定的数组data: [],// 绑定的选项数据optionsData: []}
},
公用js方法:
/*** 获取绑定的选项数据*/
getOptionsData(){getOptionsData().then(res => {let { data } = res;this.optionsData = this.handleCategory(data)});
},
/*** 处理绑定的选项数据*/
handleData(data) {let res = [];if (data.length > 0) {data.map(item => {let obj = {value: item.id,label: item.title,};if(item.children && item.children.length > 0) {obj.children = this.handleCategory(item.children);};res.push(obj);});};return res;
}
第一种 父子关联属性:
data () {return {// 绑定的属性props: { multiple: true }}
},
效果图:
第二种 父子不关联属性:
data () {return {// 绑定的属性props: { multiple: true, checkStrictly: true }}
},
效果图: