直接上图
因为element级联选择器绑定值是二维数组:
placeId:[
[
"4028812c72d4c6d20172d4de09560000",
"4028812c72d57fa30172d58da4de0000",
"4028812c72d57fa30172d5a8ce00000b",
"4028812c72d57fa30172d5a9b134000c"
],[
"4028812c72d4c6d20172d4de09560000",
"4028812c72d57fa30172d58da4de0000",
"4028812c72d57fa30172d5a8ce00000b",
"ff808081746b7c4901751aaac39e000e"
],[
"4028812c72d4c6d20172d4de09560000",
"ff8080817288769f0172d4ecba800007"
]
]
后端要求把id:"",name:""形式传入
placeId:[
[
{id: "4028812c72d4c6d20172d4de09560000", name: "1号楼"},
{id: "4028812c72d57fa30172d58da4de0000", name: "位置1"},
{id: "4028812c72d57fa30172d5a8ce00000b", name: "驱蚊器翁"},
{id: "4028812c72d57fa30172d5a9b134000c", name: "1231230000"}
],[
{id: "4028812c72d4c6d20172d4de09560000", name: "1号楼"},
{id: "4028812c72d57fa30172d58da4de0000", name: "位置1"},
{id: "4028812c72d57fa30172d5a8ce00000b", name: "驱蚊器翁"},
{id: "ff808081746b7c4901751aaac39e000e", name: "测试3号楼"}
],[
{id: "4028812c72d4c6d20172d4de09560000", name: "1号楼"},
{id: "ff8080817288769f0172d4ecba800007", name: "名称"}
]
]
因为没有name值 所以通过getCheckedNodes获取选中的节点数组:
var node = this.$refs.place.getCheckedNodes();
过滤id和name
let result = {};
过滤选中节点数据
node.filter((item) => {
//组装id:name
result[item.value] = item.label;
});
过滤后的数据:
result:{
4028812c72d4c6d20172d4de09560000: "1号楼"
4028812c72d57fa30172d5a8ce00000b: "驱蚊器翁"
4028812c72d57fa30172d5a9b134000c: "1231230000"
4028812c72d57fa30172d58da4de0000: "位置1"
ff808081746b7c4901751aaac39e000e: "测试3号楼"
ff8080817288769f0172d4ecba800007: "名称"
}
循环element级联选择器绑定值,开始改造:
var newArr = [];//目标二维数组
for (var i = 0; i < this.form.placeId.length; i++) {
let tmp = [];//目标一维数组
for (var b = 0; b < this.form.placeId[i].length; b++) {
//所有ID
let id = this.form.placeId[i][b];
let placeIdName = {
id: id,
//根据id获取name
name: result[id],
};
//把一维数据放进去
tmp.push(placeIdName);
}
//把二维数据放进去
newArr.push(tmp);
}
console.log(newArr);
最后效果:
[
[
{id: "4028812c72d4c6d20172d4de09560000", name: "1号楼"},
{id: "4028812c72d57fa30172d58da4de0000", name: "位置1"},
{id: "4028812c72d57fa30172d5a8ce00000b", name: "驱蚊器翁"},
{id: "4028812c72d57fa30172d5a9b134000c", name: "1231230000"}
],[
{id: "4028812c72d4c6d20172d4de09560000", name: "1号楼"},
{id: "4028812c72d57fa30172d58da4de0000", name: "位置1"},
{id: "4028812c72d57fa30172d5a8ce00000b", name: "驱蚊器翁"},
{id: "ff808081746b7c4901751aaac39e000e", name: "测试3号楼"}
],[
{id: "4028812c72d4c6d20172d4de09560000", name: "1号楼"},
{id: "ff8080817288769f0172d4ecba800007", name: "名称"}
]
]
注:回显是需要原始二维数组哦,如果后端没有返回就需要自己重组