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

 效果图：