element UI+Typescript Transfer 穿梭框的使用(右边数据回显问题)

这里的v-model就是右侧数据回显的值，是个回显数据key的数组
:data 绑定的数据是全部的数据 也是一个数组，需要在函数data()中声明，而且右侧框中的数据必须是在左侧数据中，否则不会显示（左侧的数据是全部数据，elementUi内部对左侧已经进行去重了）

Html代码

<el-button @click="editFieldBtn">点击变更<el-button/>

<el-dialog title="编辑" :visible.sync="changeDialogTableVisible" width="45%">
      <span slot="footer" class="dialog-footer">
        <el-button @click="changeDialogTableVisible = false">取り消し</el-button>
        <el-button type="primary" @click="editField()">確 定</el-button>
      </span>
      <el-transfer
        v-model="rightValue"
        :data="this.leftValue"
        @change="getObject"
        :titles="['正在使用', '已删除历史']"
      >
        <span  slot-scope="{option}">
          {
   
   { option.label }}
        </span>
      </el-transfer>
    </el-dialog>

定义数据部分

  changeDialogTableVisible = false // 控制遮罩层显示
  leftValue:any[] = [] // 左边数据需要把全部数据全部显示上
  rightValue:number[] = [] // 穿梭框绑定的数据，选定到右侧框中的数据项的value组成的数组，通过key值绑定
  editLayoutData:any[] = [] // 数据源array[{ key, label, disabled }]
  indexOne = 0;

逻辑

  // 打开遮罩层时，将左右数据显示，并且能点击，来回跳转
  // 根据数据表名，从后台获取各个表的所有字段的相关信息
  editFieldBtn() {
    
    
    this.changeDialogTableVisible = true
    const allData = this.editLayoutData
    const data = []
    for (let i = 0; i < allData.length; i++) {
    
    
      data.push({
    
    
        key: allData[i].id,
        label: allData[i].fieldName,
        id: allData[i].id,
        isUsed: allData[i].isUsed
      })
    }
    data.map(item => {
    
    
      if (item.isUsed === 0) {
    
    
        this.rightValue.push(item.key)
      }
    });
    (this.leftValue as any) = data
  }


// 右侧列表元素变化时触发
// value右边框里面所有的key值  direction是方向(left和right)，movedKeys是移动的key值
  getObject(value: any, direction: any, movedKeys: any) {
    
    
    // 判断移动方向
    if (direction === 'right') {
    
    
      // 找出key值，然后根据key值找到下标，进行对控制删除显示的键进行修改状态
      movedKeys.map((item: number, index:number) => {
    
    
        this.editLayoutData.filter((i, k:number) => {
    
    
          if (i.id === item) {
    
    
            this.indexOne = k
          }
        })
        // isUsed是删除，未删除的状态
        this.editLayoutData[this.indexOne].isUsed = 0
      })
    } else {
    
    
      movedKeys.map((item: any) => {
    
    
        this.editLayoutData.filter((i, k:number) => {
    
    
          if (i.id === item) {
    
    
            this.indexOne = k
          }
        })
        this.editLayoutData[this.indexOne].isUsed = 1
      })
    }
  }
调用接口修改就行了，由于使用的是vue-grid-layout插件显示的时候过滤一下显示就行了

写后台项目遇到的坑，如有错误，请多多指教