Vue中使用el-transfer渲染接口数据

1：最近遇到项目中需要使用elementui–el-transfter穿梭框渲染数据，在此记录如下：

      <el-transfer
        filterable
        :data="transferData" 
        :titles="['左', '右']"
        @change="handleChange"
        @left-check-change="leftCopeChane"
        filter-placeholder="请输入名称"
        v-model="value"
        >
      </el-transfer>

data() {
    return {
      value: [],
      transferData: []
      }
   }

import { data} from "@/api";

 getTransfer() {
      let params = {
        pageNum: 1,
        pageSize: 999,
      };
      assetApInfo(params).then(res => {
          if (res.code == 200) {
            let data = [];
            let allData = res.data.data;
            allData.forEach((item, index) => {
              data.push({
                item,
                id: item.id,
                label: item.name,
                //这里的key值一定要是index，否则目标列表无法显示
                key: index
              });
            });
            // 接口总数据筛选出来的新数组赋值给transferData
            this.transferData = data;
          } else {
            this.$message.error("接口表字段查询失败");
          }
        })
        .catch(error => {
          this.$message.error(error);
        });
     },
     handleChange(value, direction, movedKeys) {
        // console.log(value,'value值');
        // console.log(direction,'22222222222');
        // console.log(movedKeys,'33333333333');
        const tempArr = [];
        value.forEach((key)=>{
          tempArr.push(this.transferData[key].id);
        });
        this.Ids = tempArr;
        //console.log(this.selecedOption,'111111111111111')
        //console.log(this.Ids,'99999999')
     },
     leftCopeChane(selecedOption) {
        if (selecedOption.length > this.selecedOption.length) {
          let selectValue = selecedOption.concat(this.selecedOption).filter(v => !selecedOption.includes(v) || !this.selecedOption.includes(v))
        }
        this.selecedOption = selecedOption;
      },