<el-cascader
v-model="arrArrList"
:options="optionsArr"
:props="propsOptions"
collapse-tags
ref="demoCascader"
placeholder="11111"
clearable></el-cascader>
js
data(){
propsOptions:{ // 权限
children: "children",
label: "label",
id:"id",
value:"id",
multiple: true,
checkStrictly: true // 这个可以去掉 可以不去掉
},
arrArrListValue:[// 这里是后端返回的数据
{id:1},
{id:111},
{id:222},
{id:2},
]
arrArrList:[],
optionsArr:[
{id :1,label:"1",
children:[
{id:11,label:"11"},
{id:22,label:"22"}
{id:33,label:"33"}
{id:44,label:"44",
children:[
{id:111,label:"111"},
{id:222,label:"222"},
]}
]},
{id :2,label:"2"},
{id :3,label:"3"},
{id :4,label:"4"},
],
}
逻辑功能
if(this.arrArrListValue){
this.arrArrList = this.fromDeptTree(this.optionsArr, this.arrArrListValue);
} else {
this.arrArrList = []
}
fromDeptTree(array, selects) {
var items = [];
if(selects) {
for(var i = 0; i < selects.length; i++) {
var item = this.recursionDept(array, selects[i].id);
items.push(item);
}
} else {
items = []
}
return items ;
},
recursionDept(array, id) {
if(array) {
for(var i = 0; i < array.length; i++) {
if(array[i].id == id) {
var items = [] ;
items.unshift(id)
return items;
} else {
if(array[i].children) {
var res = this.recursionDept(array[i].children, id);
if(res) {
res.unshift(array[i].id);
return res ;
}
}
}
}
}
},