做后台管理系统的同学们,想必对Cascader级联选择器不会感到陌生,这个组件大多数会与树关联结合,实现对部门人员的分配等操作!这个操作前端的难点大多数是在Cascader与树的回显部分!
一般新增给后端传值的时候,保存当前人员的value或者唯一标识,而编辑回显的时候后端基本上也是将我们保存的值通过节后返回,这个时候我们就要通过返回的Id或者唯一标识,拿到当前树的节点及其祖先级节点,通过处理数据的方式,将值转化为el-Cascader的所需要回显的值!
话不多说直接上代码!
<template>
<new-container>
<el-cascader
size="small"
readonly
filterable
:props="{
multiple: true,
}"
ref="auditCascader"
v-model="auditArr"
:options="DeptTree"
:show-all-levels="false"
clearable
></el-cascader>
</new-container>
</template>
<script>
export default {
name: "",
data() {
return {
//树的值
DeptTree: [
{
value: "1",
label: "目录1",
children: [
{
value: "1.1",
label: "目录1.1",
children: [
{
value: "1.1.2",
label: "目录1.1.2",
title: "三级目录",
},
{
value: "1.1.1",
label: "目录1.1.1",
title: "三级目录",
},
],
title: "二级目录",
},
{
value: "1.2",
label: "目录1.2",
title: "二级目录",
},
],
title: "一级目录",
},
{
value: "2",
label: "目录2",
children: [
{
value: "2.1",
label: "目录2.1",
children: [
{
value: "2.1.1",
label: "目录2.1.1",
},
{
value: "2.1.2",
label: "目录2.1.2",
},
],
},
{
value: "2.2",
label: "目录2.2",
children: [
{
value: "2.2.1",
label: "目录2.2.1",
},
],
},
],
},
{
value: "3",
label: "目录3",
children: [
{
value: "3.1",
label: "目录3.1",
children: [
{
value: "3.1.1",
label: "目录3.1.1",
},
],
},
],
},
{
value: "4",
label: "目录4",
children: [
{
value: "4.1",
label: "目录4.1",
children: [],
},
{
value: "4.2",
label: "目录4.2",
children: [
{
value: "4.2.1",
label: "目录4.2.1",
},
],
},
],
},
],
auditArr:[],
};
},
mounted() {
const targetValue = ['2.1.2','4.2.1','3.1.1'];
this.auditArr=targetValue.map(item=>this.getParentList('value',item,this.DeptTree))
},
methods: {
getParentList(keyNmame, code, tree) {
// console.log('code =>', code);
let arr = []; //要返回的数组
for (let i = 0; i < tree.length; i++) {
let item = tree[i];
arr = [];
arr.push(item[keyNmame]); //保存当前节点id
if (code==item[keyNmame]) {
//判断当前id是否是默认id
return arr; //是则退出循环、返回数据
} else {
//否则进入下面判断,判断当前节点是否有子节点数据
if (item.children && item.children.length > 0) {
//合并子节点返回的数据
arr = arr.concat(this.getParentList(keyNmame, code, item.children));
if (arr.includes(code)) {
//如果当前数据中已包含默认节点,则退出循环、返回数据
return arr;
}
}
}
}
},
},
};
</script>
<style scoped ></style>
需要的同学可以把代码直接粘贴到自己demo中,验证使用!