<template>
<div>
<a-transfer :dataSource="mockData" v-model="targetKeys" :titles="['请选择数据表', '已选数据表']"></a-transfer>
</div>
</template>
<script>
import { Transfer } from 'antd';
export default {
components: {
Transfer,
},
data() {
return {
mockData: [], // 源数据
targetKeys: [] // 选中的数据
};
},
mounted() {
this.getMockData(); // 获取模拟数据
},
methods: {
getMockData() {// 这里可以根据自己的业务逻辑从服务器或其他地方获取真实的数据
const source =[
{ key: '1', title: '选项1' },
{ key: '2', title: '选项2' },
{ key: '3', title: '选项3' }]; // 源数据
const target = []; // 已经选中的数据
this.mockData = source;
this.targetKeys = target;
}
}
};
</script>
按上述代码,先来个简单的示例。结果意外发生了
title不显示。
解决方法:
<a-transfer
:dataSource="mockData"
v-model="targetKeys"
:titles="['请选择数据表', '已选数据表']"
:render="item=>item.title"
></a-transfer>