方法一：
通过 :key 值变更触发DOM重新渲染
<template>
<my-table :key="tableTimeStamp" :data="tableData"></my-table>
</template>
<script>
import MyTable from '@/components/Table/MyTable'
export default {
components: { MyTable },
data () {
return {
tableTimeStamp: '',
tableData: [],
}
},
method() {
initData() {
getList(params).then(response => {
// 重新赋值并更新key值
this.tableData = response.data;
this.tableTimeStamp = new Date().getTime();
});
}
}
}
</script>
方法二：
通过 v-if 重新渲染DOM
<template>
<my-table v-if="showTable" :data="tableData"></my-table>
</template>
<script>
import MyTable from '@/components/Table/MyTable'
export default {
components: { MyTable },
data () {
return {
showTable: true,
tableData: [],
}
},
method() {
initData() {
getList(params).then(response => {
// 重新赋值并渲染
this.showTable = false;
this.$nextTick(() => {
this.tableData = response.data;
this.showTable = true;
});
});
}
}
}
</script>
鸣谢：
1、https://blog.csdn.net/dujing_15620553271/article/details/103752433
2、https://blog.csdn.net/quKbin/article/details/88948031
