vue Transfer 穿梭框

html 内联代码片。

// An highlighted block
  <el-transfer
              style="text-align: left; display: inline-block"
              v-model="rolesle"
              :titles="['未继承角色', '已继承角色']"
              :button-texts="['到左边', '到右边']"
              :format="{
                noChecked: '${total}',
                hasChecked: '${checked}/${total}',
              }"
              @change="handleChange"
              :data="roleInherit"
              :props="{
                key: 'id',
                label: 'name',
              }"
            ></el-transfer>

数据

data(){
    return{
      value: [1, 2],//选中的数组id，处理数据是把选中的数据id，push到这个数组中
      bcalldata: [],
      leftvalue: [],
      rightvalue: [],
      datas: [
        {
          id: 1,
          name: '北京',
        },
        {
          id: 2,
          name: '上海',
        },
        {
          id: 3,
          name: '深广州圳',
        },
        {
          id: 4,
          name: '深圳',
        },
      ],
}

事件：此事件中value就是当前值，direction是代表方向：right-右边；left-左边，movedKeys是代表发生移动的数据 key 数组，保存数据需要向后台提交选中的id - movedKeys

// An highlighted block
handleChange(value, direction, movedKeys) {
      console.log(value, direction, movedKeys)
      if (direction === 'right') {
        movedKeys.forEach((key) => {
          let index = this.leftvalue.findIndex((item) => item === key)
          this.leftvalue.splice(index, 1)
        })
        movedKeys.forEach((key) => {
          this.rightvalue.push(key)
        })
      } else {
        movedKeys.forEach((key) => {
          let index = this.rightvalue.findIndex((item) => item === key)
          this.rightvalue.splice(index, 1)
        })
        movedKeys.forEach((key) => {
          this.leftvalue.push(key)
        })
      }
      console.log(this.leftvalue)
      console.log(this.rightvalue)
    },

参考：链接: link.