antd 穿梭框title不显示

<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>