在选项卡之间切换 Ant Design Vue

问题描述 投票:0回答:1

我正在尝试在选项卡之间进行切换,但发生的情况是我可以切换选项卡,但“已转移”选项卡消失了

<a-tabs :current="current" @change="onChange">
        <a-tab-pane key="1" v-if="current === 0">
            <span slot="tab">
                <a-icon type="folder-open" theme="twoTone" /> Pending ({{ pendingCount }})
            </span>

            <pending-list @go-to-transferred="nextTab" @dataCount="updatePendingCount" />
        </a-tab-pane>

        <a-tab-pane key="2" v-if="current === 1">
            <span slot="tab"><a-icon type="folder" theme="twoTone" />Transferred </span>

            <done-list @transferCount="updateTransferCount" />
        </a-tab-pane>

    </a-tabs>

export default {
    components: { PendingList, DoneList },
    data() {
        return {
            pendingCount: 0,
            transferCount: 0,
            current: 0,
        }
    },
    methods: {
        nextTab() {
            console.log('from Pending List');
            this.current = 1
        },
        onChange(current) {
            this.current = current
        },
        updatePendingCount(count) {
            console.log('Received count:', count);
            this.pendingCount = count;
        },
        updateTransferCount(count) {
            this.transferCount = count;
        },
    },
}
</script>

这是我尝试发出的其他组件的按钮

download() {
      if (this.rowSelection.selectedRowKeys.length > 0) {
        this.$emit('go-to-transferred');

        this.$message.success('file exported!');
       
      } else {
        this.$message.warn("Select employee first!");
      }

    },

【应该是这样的。】 (https://i.stack.imgur.com/Ko6Xp.png)

[但是就变成这样了。转移标签缺失] (https://i.stack.imgur.com/9l4F3.png)

我正在搜索一些教程,但它没有解决我的问题。

vue.js vuejs2 tabs antd
1个回答
0
投票

只需使用

© www.soinside.com 2019 - 2024. All rights reserved.