我正在尝试在选项卡之间进行切换,但发生的情况是我可以切换选项卡,但“已转移”选项卡消失了
<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!");
}
},
我正在搜索一些教程,但它没有解决我的问题。
只需使用 或 ,并删除 v-if。
<a-tabs :current="current" @change="onChange">
<a-tab-pane key="1">
<template #tab>
<span >
<a-icon type="folder-open" theme="twoTone" /> Pending ({{ pendingCount }})
</span>
<template>
<pending-list @go-to-transferred="nextTab" @dataCount="updatePendingCount" />
</a-tab-pane>
<a-tab-pane key="2">
<template #tab>
<span ><a-icon type="folder" theme="twoTone" />Transferred </span>
<template>
<done-list @transferCount="updateTransferCount" />
</a-tab-pane>
</a-tabs>