回显的方式
首先把这个属性设置成false,这样回显的时候v-model传递一个当前节点ID的数组就好了,就这么简简单单。
ps:以下是瞎写的,当时没发现有emitPath这个属性,保存的都是数组。后来才发现自己是个傻子
两种情况:
1.直接使用JSON回显(针对于每个人看到的菜单一致,数据库直接保存数据JSON串,直接回显)
2.保存最后一位,递归回显 (针对于每个人看到的菜单不一样,有的人能看到两级,有的人能看到三级,只保存最后一位,然后前端做一下处理)
以下代码中的变量含义:
- resultJson:要回显的JSON串
- navList:级联JSON数据(菜单父子结构数据)
- navIds:数据库保存的 2,3,4(需要回显的最后一位ID数组)
- 直接使用JSON回显 ,数据库保存数组JSON串,回显的时候直接使用该JSON串赋值;
例如数据库保存 [[1,2],[1,3],[1,4]]
// 例如回显的JSON串:resultJson = [[1,2],[1,3],[1,4]],直接model绑定即可
<el-cascader
v-model="resultJson"
:options="navList"
:props="{ multiple: true, checkStrictly: true }"
:show-all-levels="false"
clearable
></el-cascader>
- 保存最后一位,递归回显 ,针对于菜单结构多变,每个人看到的菜单层级不一样,可以在数据库中只保存选择的那一项的ID,不保存数组结构的JSON串;
例如数据库只保存 2,3,4 ,在回显之前做一些处理,处理成[[1,2],[1,3],[1,4]]的格式。
<el-cascader
v-model="resultJson"
:options="navList"
:props="{ multiple: true, checkStrictly: true }"
:show-all-levels="false"
clearable
></el-cascader>
......省略其他无用代码
//回显之前的处理
getnavList() {
//查询navList,(获取要级联展示的数据)
getnavList().then((res) => {
this.navList= res.data;
//定义一个数组,执行递归方法,执行完就是[[1,2],[1,3],[1,4]]的格式了
this.resultList = [];
this.editList(res.data,this.resultList);
//赋值给 this.resultJson,完成回显
this.resultJson= this.resultList;
});
},
//递归处理数据,获取要回显的数组
editList(deptList,ids){
for(var i=0;i<deptList.length;i++){
let childids = JSON.parse(JSON.stringify(ids));
childids.push(deptList[i].value);
//判断有没有children这个属性,有的话继续执行循环
if('children' in deptList[i]){
this.editList(deptList[i].children,childids);
}
//this.navIds(数据库保存的 2,3,4),判断2.3.4里面是否包括当前循环的菜单ID,
//如果包含,就添加到要回显的数组当中
if(this.navIds.indexOf(deptList[i].value) != -1){
this.resultList.push(childids);
}
}
},