vue中级联选择器回填_详解关于element级联选择器数据回显问题

element级联选择器数据回显问题

对于前端小菜鸡来说，被这个问题也是困扰了好久。也是百度的方法。

表单部分代码：

placeholder="请选择部门"

:props="depShowType"

:options="deptData"

filterable

change-on-select

v-model="SelectdeptId">

data中定义： depShowType:{

value:'id',

label:'name',

children:'nodes'

},

SelectdeptId：[],

methods中： // 编辑

handleEdit(data){

this.textShow=true;

this.textForm=data;

this.SelectdeptId=this.changeDetSelect(data.deptId,this.deptData) //数据双向绑定

},

changeDetSelect(key,treeData){

let arr = []; // 在递归时操作的数组

let returnArr = []; // 存放结果的数组

let depth = 0; // 定义全局层级

// 定义递归函数

function childrenEach(childrenData, depthN) {

for (var j = 0; j < childrenData.length; j++) {

depth = depthN; // 将执行的层级赋值 到 全局层级

arr[depthN] = (childrenData[j].id);

if (childrenData[j].id == key) {

returnArr = arr.slice(0, depthN+1); //将目前匹配的数组，截断并保存到结果数组，

break

} else {

if (childrenData[j].nodes) {

depth ++;

childrenEach(childrenData[j].nodes, depth);

}

}

}

return returnArr;

}

return childrenEach(treeData, depth);

},

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持聚米学院。