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="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(() => {}) 进行包裹当前子组件的初始事件即可