Ant Design of Vue - Tabs标签页
Tabs标签页主页面<template><div><a-tabs default-active-key="1" @change="callback"><a-tab-pane key="1" tab="Tab 1"><XxTable ref='XxTable'/></a-tab-pane><a-tab-pane key="
·
Tabs标签页
主页面
<template>
<div>
<a-tabs default-active-key="1" @change="callback">
<a-tab-pane key="1" tab="Tab 1">
<XxTable ref='XxTable'/>
</a-tab-pane>
<a-tab-pane key="2" tab="Tab 2">
<XxTable ref='XxTable'/>
</a-tab-pane>
</a-tabs>
</div>
</template>
<script>
import XxTable from "./modules/XxTable.vue"
export default {
components:{ XxTable },
data() {
return {};
},
methods: {
callback(key) {
this.$nextTick(() =>{
this.$refs.XxTable.loade()
})
},
},
};
</script>
子组件
<template>
<a-table
:columns="columns"
:data-source="data">
</a-table>
</template>
<script>
export default {
data() {
return {
data,
columns,
};
},
methods: {
loade() {
this.$axios.get('/loade/tablelist').then(res => { this.data = res.result })
}
}
};
</script>
<a-tab-pane>
中如果嵌套同一个一个Vue的子组件,在主页面的tabs切换中会DOM元素的不正常显示。
解决方式:
在tabs标签页中的 click或change事件中,使用 this.$nextTick(() => {})
进行包裹当前子组件的初始事件即可
更多推荐
已为社区贡献4条内容
所有评论(0)