页面代码
`<div style="text-align:center;">
<el-transfer
class="trans"
v-model="value"
filterable
:titles="['待选列表', '已选列表']"
:button-texts="['到左边', '到右边']"
:props="{
key: 'id',
label: 'name'
}"
@change="handleChange"
:data="data"
>
<span slot-scope="{ option }" class="spanList">
<span class="spanTitle">{{ option.name }}</span>
<span class="spanpadd">{{ option.fileType }}</span>
</span>
</el-transfer>
</div>
<div class="footBtn">
<el-button type="primary" @click="handleTrue">确定</el-button>
<el-button @click="goBack">返回</el-button>
</div>
因为Transfer的数据源只支持key, label, disabled,所以我们使用props更改数据源字段
:props="{
key: 'id',
label: 'name'
}"
然后使用scoped-slot自定义数据项(option.name–name字段是后端返回的字段信息)
<span slot-scope="{ option }" class="spanList">
<span class="spanTitle">{{ option.name }}</span>
<span class="spanpadd">{{ option.fileType }}</span>
</span>
接收数据代码
我是使用自定义的axios接收后端数据
后端分成了两个json数据liWait和liFinish 我使用了concat方法把他们拼接成了一个
data() {
return {
data: [],//数据源
tableData: [],//接收右边已选择的数据
value: [],//页面显示右边已选择的数据
};
},
mounted() {
this.handleList();
},
methods: {
handleChange(value) {
this.packageList = value;
},
handleList() {
this.$post('/advert/findUnDistributeByPack', {
packageId: this.$route.query.id
}).then(res => {
if (res.status == 200) {
let dataList = [];
this.data = res.data.liWait.concat(res.data.liFinish);
this.tableData = res.data.liFinish;
this.tableData.forEach(item => {
dataList.push(item.id);
});
this.value = dataList;
} else {
this.$messageList('error', '获取数据失败~' + res.msg);
}
});
}
}