vue.js|Cascader 级联选择器多选功能下实现默认全选功能！ vue.js|技术类

实现场景：客户需要一开始就默认全选用的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

【vue.js|Cascader 级联选择器多选功能下实现默认全选功能！】在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) } }) },

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