vue实现自定义树形穿梭框功能

需求：

我们在开发过程中，会遇到需要将一个数据选择做成穿梭框，但是要求穿梭框左侧为树形结构、右侧为无层级结构的数据展示，ElementUI自身无法在穿梭框中添加树形结构，网上搜到了大佬封装的插件但是对于右侧的无树形结构一点还是不太满足。以下是我们简单的封装写的组件可以实现此功能

1，封装的treeTransfetr组件如下：

​<template>
    <div class="treeTransfer">
      <!-- 左边 -->
      <div class="leftTree">
          <div class="list">
              <div class="left_lowline">
                  <div class="leftcheck_con">
                      <el-checkbox v-model="checkedLeft" :disabled="leftTreeData.length < 1" label="" size="large"
                      style="margin-right: 12px" @change="leftAllCheck" />
                      <p class="left_title">{{ props.title[0] }}</p>
                  </div>
                  <div>
                      {{ leftOperation.length }}/{{ leftAllselectIdarry.length }}
                  </div>
              </div>
              <el-tree 
                  ref="leftTreeRef" 
                  :data="leftTreeData" 
                  show-checkbox
                  node-key="id" 
                  :props="props.defaultProps" 
                  v-slot="{ node, data }" 
                  accordion
                  :check-strictly="true"
                  @check="onCheckLeft" 
                  default-expand-all>
                  <div>
                      {{ data.label }}
                  </div>
              </el-tree>
          </div>
      </div>
      <!-- 中间按钮 -->
      <div class="btnDiv">
          <div class="mg10">
              <el-button @click="toRight()" icon="ele-Right" type="primary"  circle :disabled="leftOperation.length < 1"/>
          </div>
          <div class="mg10">
              <el-button @click="toLeft()" icon="ele-Back" type="primary" circle :disabled="rightOperation.length < 1"/>
          </div>
      </div>
      <!-- 右边 -->
      <div class="rightTree">
          <div class="list">
              <div class="left_lowline">
                  <div class="leftcheck_con">
                      <el-checkbox v-model="checkedRight" :disabled="rightTreeData.length < 1" label="" size="large"
                      style="margin-right: 12px" @change="rightAllCheck" />
                      <p class="left_title">{{ props.title[1] }}</p>
                  </div>
                  <div>
                      {{ rightOperation.length }}/{{ rightAllselectIdarry.length }}
                  </div>
              </div>
              <el-tree ref="rightTreeRef" 
                  :data="rightTreeData" 
                  show-checkbox 
                  node-key="id"
                  :props="props.defaultProps" 
                  v-slot="{ node, data }" 
                  accordion 
                  :check-strictly="true"
                  @check="onCheckRight" 
                  default-expand-all>
                  <div>
                      {{ data.label }}
                  </div>
              </el-tree>
          </div>
      </div>
    </div>
  </template>
  
  <script setup lang="ts">
  import { ref, onMounted, watch, nextTick } from 'vue';
  import lodash from 'lodash-es'
  const props = defineProps(['fromData', 'toData', 'defaultProps', 'title', 'visible']);
   
  const checkedLeft = ref(false)
  const checkedRight = ref(false)
  
  const leftOperation = ref<any[]>([])
  const rightOperation = ref<any[]>([])
   
  // 定义emit
  const emits = defineEmits(['addStaffchange']);
  const leftTreeRef = ref();
  const rightTreeRef = ref();
   
  // 左侧数据
  const leftTreeData = ref([] as any);
  // 右侧数据
  const rightTreeData = ref([] as any);
  
  // 左侧可以选中id集合
  const leftAllselectIdarry = ref([] as any)
  
  // 右侧可以选中id集合
  const rightAllselectIdarry = ref([] as any)
   
  watch(
      props,
      newVal => {
          leftTreeData.value = lodash.cloneDeep(newVal.fromData)
          rightTreeData.value = lodash.cloneDeep(newVal.toData)
          // 获取左侧的全选中的id
          leftAllselectIdarry.value = getAllIds(leftTreeData.value, [])
          if (newVal.visible) {
              checkedLeft.value = false
              checkedRight.value = false
              leftOperation.value = []
              rightOperation.value = []
              nextTick(() => {
                  leftTreeRef?.value.setCheckedKeys([])
              })
          }
      },
      { immediate: true }
  )
   
  defineExpose({
      leftTreeData,
      rightTreeData
  })
   
  onMounted(() => {
  })
  
  // 去右边
  const toRight = async () => {
      const leftTree = leftTreeRef.value;
      if (!leftTree) {
          return
      }
      const leftNodes = leftTree.getCheckedNodes(false, false)
      const checkedKeys = leftTree.getCheckedKeys(false)
      const rightTree = rightTreeRef.value
      const newArr = rightTreeData.value.concat(leftNodes)
      
      let obj = {};
      let peon = newArr.reduce((cur,next) => {
          obj[next['id']] ? "" : obj[next['id']] = true && cur.push(next);
          return cur;
      },[]) 
      //设置cur默认类型为数组，并且初始值为空的数组
      const getnewleftArry = peon.map(item => {
         return {
          id: item.id,
          label: item.label,
          pid: item.pid,
          children: [],
         }
      })
      rightTreeData.value = getnewleftArry
      leftOperation.value = leftTreeRef.value?.getCheckedKeys(false)
      emits('addStaffchange', checkedKeys)
      setTimeout(() => {
          rightTree?.setCheckedNodes(leftNodes);
          rightOperation.value = rightTreeRef.value?.getCheckedKeys(false)
          rightAllcheckChange()
      }, 500)
  };
  
  // 去左边
  const toLeft = async () => {
      const rightTree = rightTreeRef.value
      if (!rightTree) {
          return
      }
      const checkedKeys = rightTree.getCheckedKeys(false)
      for(var i=0; i<rightTreeData.value.length;i++){
        if(checkedKeys.includes(rightTreeData.value[i].id)){
          rightTreeData.value.splice(i,1)
          i-=1
        }
      }
      rightOperation.value = rightTree?.getCheckedKeys(false)
      if (rightTreeData.value && rightTreeData.value.length === 0) {
          checkedRight.value = false
      }
      emits('addStaffchange', getAllIds(rightTreeData.value, []))
  };
  
   
  //左侧选中
  const onCheckLeft = () => {
      leftOperation.value = leftTreeRef.value?.getCheckedKeys(false)
      if (leftOperation.value.length === leftAllselectIdarry.value.length) {
          checkedLeft.value = true
      } else {
          checkedLeft.value = false
      }
  }
  
  // 右侧选中
  const onCheckRight = () => {
      rightOperation.value = rightTreeRef.value?.getCheckedKeys(false)
      rightAllselectIdarry.value.length = getAllIds(rightTreeData.value, []).length
      rightAllcheckChange()
  }
  
  // 右侧是否全选获取
  function rightAllcheckChange () {
      rightAllselectIdarry.value.length = getAllIds(rightTreeData.value, []).length
      if (rightOperation.value.length === rightAllselectIdarry.value.length) {
          checkedRight.value = true
      } else {
          checkedRight.value = false
      }
      return checkedRight.value
  }
  
   
  // 左侧全选中值 
  const leftAllCheck = () => {
      if (checkedLeft.value) {
          leftTreeRef.value.setCheckedKeys(getAllIds(leftTreeData.value, []))
          checkedLeft.value = true;
      } else {
          leftTreeRef.value.setCheckedKeys([])
          checkedLeft.value = false
      }
      leftOperation.value = leftTreeRef.value?.getCheckedKeys(false)
  }
   
  // 右侧全选中值 
  const rightAllCheck = () => {
      if (checkedRight.value) {
          rightTreeRef.value.setCheckedKeys(getAllIds(rightTreeData.value, []))
          checkedRight.value = true
      } else {
          rightTreeRef.value.setCheckedKeys([])
          checkedRight.value = false
      }
      rightOperation.value = rightTreeRef.value?.getCheckedKeys(false)
  }
  
  
  // 递归获取所有id数据
  function getAllIds(tree, result) {
    //遍历树获取id数组
    for (const i in tree) {
      if (!tree[i].disabled) {
          result.push(tree[i].id); // 遍历项目满足条件后的操作
      }
      if (tree[i].children) {
        // 存在子节点就递归
        getAllIds(tree[i].children, result);
      }
    }
    return result;
  }
  </script>
  
  <style scoped lang="scss">
  .treeTransfer {
      display: flex;
      justify-content: center;
      .el-tree {
          overflow: auto;
          max-height: 360px;
      }
      .leftTree {
          border: 1px solid #ebeef5;
          width: 40%;
          height: calc(100% - 60px);
          overflow: auto;
      }
  
      .left_lowline {
          display: flex;
          align-items: center;
          justify-content: space-between;
          background: #f5f7fa;
          padding: 0 23px 0 10px;
          .leftcheck_con {
              display: flex;
              align-items: center;
          }
      }
      .btnDiv {
          width: 20%;
          height: calc(100% - 60px);
          text-align: center;
          margin: auto 0;
          line-height: 40px;
          position: relative;
      }
      .rightTree {
          width: 40%;
          height: calc(100% - 60px);
      }
  }
  </style>
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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
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
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294

2，具体使用如下

<treeTransfetr 
          ref="treeTransferRef" 
          :fromData="fromData"
          :toData="toData"
          :visible="visible"
          :defaultProps="transferProps" 
          @addStaffchange="addStaffchange" 
          :title="['筛选结果', '添加人员']"
        >
        </treeTransfetr>

let treeTransferRef = ref(); // 树形穿梭框
let fromData = ref([
  {
    id: "1",
    pid: 0,    //自定义pid的参数名，默认为"pid" 必填：false
    label: "张三-D1-DM",
    disabled: false,
    children: [
      {
        id: "1-1",
        pid: "1",
        label: "李四-D1-TL",
        disabled: false,
        children: []
      },
      {
        id: "1-2",
        pid: "1",
        label: "王五-D2-TL",
        disabled: false,
        children: [
          {
            id: "1-2-1",
            pid: "1-2",
            children: [],
            label: "赵六-D3-TL",
            disabled: true,
          },
          {
            id: "1-2-2",
            pid: "1-2",
            children: [],
            label: "李明-D4-TL",
            disabled: false,
          },
          {
            id: "1-2-3",
            pid: "1-2",
            children: [],
            label: "王三明-D5-TL",
            disabled: false,
          }
        ]
      }
    ]
  }
]); // 树形数据
let toData = ref([]); // 选中的ids数据
const transferProps = ref({
  label: 'label',
  children: 'children',
  disabled: 'disabled',
});

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
63
64
65

如果我们想要用插件实现，推荐使用el-tree-transfer