多维数组去除满足条件的对象
一、此处demo以el-tree-transfer为例，主要是回显时假如后台没有筛选已选择的和未选择的，自己处理数据涉及到多维数组去除满足条件的对象情况
比如： 丛数组fromData数组中剔除与toData中含有的数据一直的对象
处理方式为：1、将多维数据扁平化处理 2、根据业务处理处理扁平化之后的数组 3、将一维数组再转成多维数组 fromData: [ { id: "1", pid: 0, label: "一级 1", children: [ { id: "1-1", pid: "1", //对应父元素的id label: "二级 1-1", disabled: false, children: [], }, { id: "1-2", pid: "1", label: "二级 1-2", children: [], }, ], }, { id: "2", pid: 0, label: "设备2", children: [ { id: "2-1", pid: "2", label: "设备2-1", children: [], }, { id: "2-2", pid: "2", label: "设备2-2", children: [], }, ], }, ], toData: [ { id: "2", pid: 0, label: "设备2", children: [ { id: "2-1", pid: "2", label: "设备2-1", children: [], }, { id: "2-2", pid: "2", label: "设备2-2", children: [], }, ], }, ],
以el-tree-transfer为demo处理如下
<template>
<div>
<!-- <el-checkbox v-model="checked">备选项</el-checkbox> -->
<tree-transfer
:title="['组织架构', '已选择']"
:from_data="fromData"
:to_data="toData"
:defaultProps="{ label: 'label' }"
@addBtn="add"
@removeBtn="remove"
:mode="mode"
height="840px"
filter
openAll
>
</tree-transfer>
<button @click="abc">添加</button>
<button @click="def">回显</button>
</div>
</template>
<script>
import treeTransfer from "el-tree-transfer"; // 引入
export default {
data() {
return {
checked: "",
title: "",
mode: "transfer", // transfer addressList
fromData: [
{
id: "1",
pid: 0,
label: "一级 1",
children: [
{
id: "1-1",
pid: "1", //对应父元素的id
label: "二级 1-1",
disabled: false,
children: [],
},
{
id: "1-2",
pid: "1",
label: "二级 1-2",
children: [],
},
],
},
{
id: "2",
pid: 0,
label: "设备2",
children: [
{
id: "2-1",
pid: "2",
label: "设备2-1",
children: [],
},
{
id: "2-2",
pid: "2",
label: "设备2-2",
children: [],
},
],
},
],
toData: [
{
id: "2",
pid: 0,
label: "设备2",
children: [
{
id: "2-1",
pid: "2",
label: "设备2-1",
children: [],
},
{
id: "2-2",
pid: "2",
label: "设备2-2",
children: [],
},
],
},
],
fromDataArray: [],
toDataArray: [],
};
},
mounted() {
var that = this;
},
methods: {
// 切换模式 现有树形穿梭框模式transfer 和通讯录模式addressList
changeMode() {
debugger;
if (this.mode == "transfer") {
this.mode = "addressList";
} else {
this.mode = "transfer";
}
},
// 监听穿梭框组件添加
add(fromData, toData, obj) {
debugger;
// 树形穿梭框模式transfer时，返回参数为左侧树移动后数据、右侧树移动后数据、移动的{keys,nodes,halfKeys,halfNodes}对象
// 通讯录模式addressList时，返回参数为右侧收件人列表、右侧抄送人列表、右侧密送人列表
// console.log("fromData:", fromData);
// console.log("toData:", toData);
// console.log("obj:", obj);
},
// 监听穿梭框组件移除
remove(fromData, toData, obj) {
debugger;
// 树形穿梭框模式transfer时，返回参数为左侧树移动后数据、右侧树移动后数据、移动的{keys,nodes,halfKeys,halfNodes}对象
// 通讯录模式addressList时，返回参数为右侧收件人列表、右侧抄送人列表、右侧密送人列表
// console.log("fromData:", fromData);
// console.log("toData:", toData);
// console.log("obj:", obj);
},
abc() {
var that = this;
console.log(that.fromData);
console.log(that.toData);
},
def() {
var that = this;
var fromData = that.fromData;
var toData = that.toData;
that.handlerTree(fromData, toData);
},
// 多维数组去重
handlerTree(data1, data2) {
var that = this;
//数组扁平化处理
let fromData = that.flat(data1, that.fromDataArray);
let toData = that.flat(data2, that.toDataArray);
//对比后删除
toData.forEach((msg) => {
for (var i = fromData.length - 1; i >= 0; i--) {
if (
msg.id == fromData[i].id &&
msg.pid == fromData[i].pid &&
fromData[i].pid != 0
) {
fromData.splice(i, 1);
}
}
});
debugger;
console.log(fromData);
// 处理完成的以为数组进行转多维数组
that.multidimensional(fromData);
},
//数组扁平化处理
flat(arr, flatArray) {
var that = this;
var array = arr;
array.forEach((item) => {
if (item.pid == "0") {
var json = {
id: item.id,
pid: 0,
label: item.label,
};
flatArray.push(json);
} else {
flatArray.push(item);
}
if (item.children.length > 0) {
that.flat(item.children, flatArray);
}
});
return flatArray;
},
// 一维数组转成多维数组
multidimensional(data) {
let AllData = data;
//将数组转成成map格式，便于处理 1:[] 2:[]
let treeMapList = AllData.reduce((memo, current) => {
memo[current["id"]] = current;
return memo;
}, {});
let result = AllData.reduce((arr, current) => {
let pid = current.pid;
let parent = treeMapList[pid];
if (parent) {
parent.children
? parent.children.push(current)
: (parent.children = [current]);
} else if (pid == 0) {
arr.push(current);
}
return arr;
}, []);
console.log(result);
// 此处左侧的会一直存在一级菜单，可以加判断children为0再删除
this.fromData = result;
},
},
components: { treeTransfer }, // 注册
};
</script>
<style>
</style>
