VUE ANT DESIGN 穿梭框切换问题

白水要努力 2019-07-04 11:09:43

期望实现功能：左侧为切换列表，右侧为穿梭框；点击对应tab在穿梭框中左侧只展示对应tab下的数据，穿梭框右侧显示所有已经选择的内容（tab切换不影响显示）。

困惑：翻阅了官方穿梭框的api，发现DataSource只能定义为左侧和右侧同一个数据源，也就是说切换tab页时重新替换DataSource，但这样右侧已经选择的内容也会被覆盖掉。

个人想到的解决办法：翻看了transfer，发现内部有leftFilter和rightFilter,这两个是不是可以过滤左右侧穿梭框的数据。



<template>

    <a-card>

        <a-card-grid style="width:25%;">

            <a-tabs :defaultActiveKey="defaultActiveKey"

                    :tabPosition="mode"

                    :activeKey="defaultActiveKey"

                    @change="chooseThisAssayHeader">

                <a-tab-pane v-for="item in tabList" :tab="item.name"

                            :key="item.key">

                </a-tab-pane>

            </a-tabs>

        </a-card-grid>

        <a-card-grid style="width:75%;">

            <a-transfer

                    :dataSource="mockData"

                    :titles="['当前项', '已选项']"

                    :listStyle="{

                                                  width: '45%',

                                                  height: '600px',

                                                }"

                    :operations="['选中', '去除']"

                    :targetKeys="targetKeys"

                    @change="handleChange"

                    :render="item=>`${item.title}-${item.description}`"

            >

                                <span slot="notFoundContent">

                                  暂无相关数据

                                </span>

            </a-transfer>

        </a-card-grid>

    </a-card>

</template>



<script>

    export default {

        data() {

            return {

                mode: 'left',

                defaultActiveKey: 'A',

                tabList: [

                         {name: 'Atab', id: '1', key: 'A'}, 

                         {name: 'Btab', id: '2', key: 'B'}

                         ],

                mockData: [

                         {title: 'A', description: 'A1', key: '1',}, 

                         {title: 'A', description: 'A2', key: '2'}, 

                         { title: 'A',description: 'A3', key: '3'},

                         {title: 'B', description: 'B1', key: '4'}, 

                         {title: 'B', description: 'B2', key: '5'}

                         ],

                targetKeys: [],

            }

        },

        methods: {

            chooseThisAssayHeader(val) {

                this.defaultActiveKey = val;

            },

            handleChange(targetKeys, direction, moveKeys) {

                console.log(targetKeys, direction, moveKeys);

                this.targetKeys = targetKeys

            },

        },

    }

</script>