【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 {// 存一个用户idrelateUserId: undefined,// 穿梭框遮罩层showTransfer: false,// 弹出层标题title: '',// 遮罩层数据relateStationValue: [],relateStation: {data: [], //全部列表数组对象value: [], //右侧选定数值stationTypeList: [],stationOptionList: []}}},methods:{// 关联配电站，根据权限查询拿到值，并且赋值getRelateStationList(row) {this.relateStation = {}//我需要传递的权限Idconst userId = row.userId || this.idsthis.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}]}
}