element 穿梭框有边框勾选数据上下移动_el-transfer target-order

1.排序方法需要改

target-order设置为"push"

<el-transfer   target-order="push"
1

官方文档

2.右侧的东西

 <el-transfer v-model="value" :data="data"></el-transfer>
1

v-model=“value” 右侧数据来源
:data=“data” 左边数据来源
官方文档

Transfer 的数据通过 data 属性传入。数据需要是一个对象数组，每个对象有以下属性：key 为数据的唯一性标识，label为显示文本，disabled 表示该项数据是否禁止转移。目标列表中的数据项会同步到绑定至 v-model 的变量，值为数据项的 key所组成的数组

所以你如果想要上下移动右侧个别数据的
只需要改变vlaue数组里面的数据就行

3.右侧你勾选的东西

<el-transfer  @right-check-change = "checkChange"

checkChange(val,val2){
      // val 选中数据的列表
      // val2 处发的是那条
      this.checkValue = val;
    },
1
2
3
4
5
6
7

官方文档

遇见的坑

1.上下移动时建议先判断他们在数组的顺序，按照，往前移排前头的先进行换位，往后移排后头的先进行换位

[1,2,3,4,5,6,7]
	4,5,6 往后>>>>>
[1,2,3,4,5,7,6]
[1,2,3,4,7,5,6]
[1,2,3,7,4,5,6]

[1,2,3,4,5,6,7]
<<<<<向前 4,5,6 
[1,2,4,3,5,6,7]
[1,2,4,5,3,6,7]
[1,2,4,5,6,3,7]
1
2
3
4
5
6
7
8
9
10
11

代码呢，还是自己写的好一点，我的参考下就好，看完了别忘了赞

@click="shang(1)"上
@click="shang(-1)"下
    
    
    // 上下跳动
    shang(val){
      if(右侧列表选中数据的列表.length > 0){
        var indexs = [];
          //val =  1 向下 -1 向上
            for (const key of 右侧列表选中数据的列表) {
              // 判断下标
              for (const k in 右侧列表) {
                if (右侧列表[k] == key) {
                  indexs.push(k*1);
                }
              }
            }
        // 排序
        indexs = indexs.sort()

        if (val == -1) {
          // 向上移动
          for (const i of indexs) {
            this.huanWei(i,val)
          }
        } else {
          // 向下移动先翻转一下
          indexs.reverse()
          for (const i of indexs) {
            this.huanWei(i,val)
          }
        }
      }
    },
    // 换位
    //key*1 强转
    huanWei(key,i){
      // 换位
      var a = 右侧列表[key]
      var b = 右侧列表[key*1+i*1]
      console.log("互换：",右侧列表,a,b);
      if (b != null) {
        右侧列表[key] = 右侧列表[key*1+i*1]
        右侧列表[key*1+i*1] = a
      }
      var c = 右侧列表;
      右侧列表 = []
      右侧列表 = [...c]
      console.log(右侧列表,a,b);
    },
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