随笔- 105 文章- 0 评论- 12 阅读- 26万

多维数组去除满足条件的对象

一、此处demo以el-tree-transfer为例，主要是回显时假如后台没有筛选已选择的和未选择的，自己处理数据涉及到多维数组去除满足条件的对象情况

比如：
丛数组fromData数组中剔除与toData中含有的数据一直的对象<br>处理方式为：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处理如下

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

<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>