antd中在vue项目中自定义穿梭框

1、完整代码

2、utils.js文件

function handleChooseArr(arr, keywords) {
  let newArr = [];
  arr.forEach(item => {
    if (item.title.includes(keywords)) {
      newArr.push(item);
    } else {
      if (item.children && item.children != null) {
        const childrenArr = [];
        item.children.forEach(it => {
          if (it.title.includes(keywords)) {
            childrenArr.push(it);
          }
        })
        if(childrenArr.length) {
          newArr.push({
            ...item,
            children: childrenArr
          });
        }
      }
    }
  })
  return newArr;
}

function handleTreeData(data, targetKeys = []) {
  data.forEach(item => {
    item['disabled'] = true;
    if (item.children && item.children != null) {
      item.children.forEach(it => {
        if(targetKeys.includes(it.key)) {
          it.disabled = true;
        } else {
          it.disabled = false
        }
      })
    }
  });
  return data;
};

function handleOriginalData(data) {
  let newArr = [];
  data.forEach(item => {
    newArr.push({title: item.title, key: item.key});
    if(item.children && item.children !== null) {
      item.children.forEach(it => {
        newArr.push({
          title: it.title,
          key: it.key,
        });
      })
    }
  })
  return newArr;
};

export {
  handleChooseArr,
  handleTreeData,
  handleOriginalData
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

3、以上需要注意的点：

dataSource做为穿梭框的数据源需要是一维数组，并且里面的属性title和key都要为string类型，不然就会报错（dataSource类型不正确）
1

在这里插入图片描述

4、最终实现的效果
在这里插入图片描述

相关阅读:
回归预测 | MATLAB实现CNN-LSSVM基于卷积神经网络-最小二乘支持向量机的数据回归预测（多指标，多图）
【Golang语言入门介绍】
使用Windows自带命令，将文件编码改为ANSI的方法
 10.17课上（七段显示器，递归异或与电路）
现场感言讲稿的标准模板
 Tomcat信创平替之TongWEB(东方通),安装步骤
 C2基础设施威胁情报对抗策略
 【基于FreeRTOS的STM32F103系统】移动底盘程序优化
 Java之俄罗斯方块小游戏
 数据库基础理论
原文地址：https://blog.csdn.net/yangyanqin2545/article/details/132742406