vue+element 使用scoped-slot自定义数据项自定义Transfer 穿梭框数据

页面代码

`<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);
				}
			});
		}
	}