![](https://i-blog.csdnimg.cn/blog_migrate/358a511dd56fdcb42d8e84499c24609a.png)
<el-cascader
ref="cascader"
v-model="pids"
:options="options"
:show-all-levels="false"
:props="{ expandTrigger: 'hover', value: 'id', label: 'name',multiple: true }"
@change="handleChange"
clearable></el-cascader>
<button @click="clickHandle">回显[3, 10]</button>
parent_id为上一级父级的id值,后续要查找使用
pids为选择的数组
pids: [],
options: [
{
id: 1,
name: '总部id1',
children: [
{
id: 2,
name: '工程技术部id2',
parent_id: 1,
children: [
{ id: 3, name: '工程员工id3', parent_id: 2 },
{ id: 4, name: '工程员工id4', parent_id: 2 },
{ id: 5, name: '工程员工id45', parent_id: 2 }
]
},
{
id: 7,
name: '人力资源id7',
parent_id: 1,
children: [
{ id: 8, name: '人力员工id8', parent_id: 7 },
{ id: 9, name: '人力员工id9', parent_id: 7 },
{ id: 10, name: '人力员工id10', parent_id: 7 }
]
}
]
}
],
defaultArr: [3, 10] // 模拟后台传值
handleChange(value) {
console.log('value', value)
},
clickHandle() {
const list = []
this.defaultArr.map(v => {
list.push(this.findParentLot(v))
})
this.pids = list
},
findParentLot(id) {
const arr = []
this.findLot(this.options, id, arr)
return arr.reverse()
},
findLot(list, id, arr) {
list.forEach((v) => {
if (v.id === id) {
arr.push(id)
if (!v.parent_id || v.parent_id !== '0') {
this.findLot(this.options, v.parent_id, arr)
}
} else {
if (v.children && v.children.length) {
this.findLot(v.children, id, arr)
}
}
})
},