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 }}
},

 效果图：