Cascader 级联选择器多选功能下 实现默认全选功能！

实现场景：客户需要一开始就默认全选 用的Cascader 级联选择器！
element ui 版本 "element-ui": "^2.9.2",

解决办法：由于官方没有提供此api 所以需要自己去递归操作后端返回的数据！

例如：后端返回的数据是list: [{"index":1,"id":"1","pid":null,"name":"总公司","children":[{"index":2,"id":"1002","pid":"1","name":"人事部","children":null},{"index":2,"id":"3b4185ac6cc811ea8869000c295685cd","pid":"1","name":"质检一组","children":null},{"index":2,"id":"4239bb7e6cc811ea8869000c295685cd","pid":"1","name":"质检二组","children":null},{"index":2,"id":"1001","pid":"1","name":"质检部","children":null}]}]。这样的。那么下图中v-model 的数据就应该为[['1'],['1','1002']]

这样才能默认选中总公司 和 人事部

html 代码为：

// 开启多选！

js代码：在created生命周期里面加

const list = []
this.makeData(list, [], this.outGoingDepartment) // outGoingDepartment就是前面说到的后端返回来的那个list
this.departmentVal = list

在method里面加

makeData(list, upArray, dataSource) {
  dataSource.forEach((item) => {
    const array = [...upArray, item.id]
    list.push(array)
    if (item.children) {
      this.makeData(list, array, item.children)
    }
  })
},

是不是很简单，大佬们赶快试一试！