element 穿梭框有边框勾选数据上下移动

短命女 2023-07-10 15:42 8阅读 0赞

## 1.排序方法需要改 ##

target-order设置为"push"

<el-transfer   target-order="push"

官方文档

<table> 
 <thead> 
  <tr> 
   <th>target-order</th> 
   <th>右侧列表元素的排序策略：若为 original，则保持与数据源相同的顺序；若为 push，则新加入的元素排在最后；若为 unshift，则新加入的元素排在最前</th> 
   <th>string</th> 
   <th>original / push / unshift</th> 
   <th>original</th> 
  </tr> 
 </thead> 
 <tbody></tbody> 
</table>

## 2.右侧的东西 ##

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

**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;
        },

官方文档

<table> 
 <thead> 
  <tr> 
   <th>right-default-checked</th> 
   <th>初始状态下右侧列表的已勾选项的 key 数组</th> 
   <th>array</th> 
   <th>—</th> 
   <th>[ ]</th> 
  </tr> 
 </thead> 
 <tbody></tbody> 
</table>

## 遇见的坑 ##

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]

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

@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);
        },