【Vue2】element 穿梭框使用

   <el-dialog :title="title" :visible.sync="showTransfer" width="650px" append-to-body>
      <el-transfer :props="{key: 'stationId',label: 'stationName'}"
                   :titles="['未关联电站', '已关联配电站']" :filterable="false" filter-placeholder="请输入配电站名称"
                   v-model="relateStationValue"
                   :data="relateStation.data"
      >
      </el-transfer>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="UpdataRelateStation()">确定绑定</el-button>
      </div>
    </el-dialog>

 data() {
    return {
      // 存一个用户id
      relateUserId: undefined,
      // 穿梭框遮罩层
      showTransfer: false,
      // 弹出层标题
      title: '',
      // 遮罩层数据
      relateStationValue: [],
      relateStation: {
        data: [], //全部列表数组对象
        value: [], //右侧选定数值
        stationTypeList: [],
        stationOptionList: []
      }
      }
    },

methods:{
	 // 关联配电站，根据权限查询拿到值，并且赋值
    getRelateStationList(row) {

      this.relateStation = {}
      //我需要传递的权限Id
      const userId = row.userId || this.ids
      this.relateUserId = row.userId || this.ids
      
      //调取接口
      relationListByAuthority(userId).then(response => {
        this.title = '关联电站'
        this.showTransfer = true
        // 配电站绑定的数据,赋值
        this.relateStation.data = response.data.all
        //打印值观察
        console.log(response.data.all, response.data.select, '--')
       
        //判断如果有选中的数据
        if (response.data.select.length > 0) {
          this.relateStationValue = response.data.select.map(i => i.relationStationId)
          console.log(this.relateStationValue, '打印的array值')
        }
        
      })
    },
}

后台返回数据格式

"data": {
        "all": [
            {
                "stationId": 2,
                "stationName": "测试二号电站",
            },
            {
                "stationId": 4,
                "stationName": "测试3",
            }
        ],
        "select": [
            {
                "relationId": 84,
                "relationUserId": 1,
                "relationUserName": "admin",
                "relationStationId": 2,
                "relationStationName": "测试二号",
                "stationVos": null
            },
            {
                "relationId": 85,
                "relationUserId": 1,
                "relationUserName": "admin",
                "relationStationId": 4,
                "relationStationName": "测试三号",
                "stationVos": null
            }
        ]
    }
}