【vue2】el-table 从接口获取数据改变了，但是页面却没有正常渲染

方法一：在el-table上面添加一个 key 属性，指定一个唯一的值，然后数据改变后，我们更新这个唯一值，这样 Vue 会自动重新渲染该组件

1、获取随机uuid

创建在uuid.js文件当中

// 获取唯一id
export function getid() {
  const r = URL.createObjectURL(new Blob());
  return r.substr(r.lastIndexOf("/") + 1, r.length - 1);
}

 2、引入该文件并且定义

import { getid } from "@/utils/uuid.js"; // 引入getid
// data 中定义uuid
data() {
    return {
      uuid: getid()
    }
}

3、绑定key

<div v-if="tableData.length" class="tab-back">
  <table-com
    :key="uuid"
    :column-info="columnList"
    :table-data="tableData"
    :show-sort="true"
    sort-width="80px"
    :show-sle="false"
    :total-count="totalCount"
    :page-size="pageSize"
    :current-page="pageNo"
    @handlePageChange="handlePageChange"
  ></table-com>
</div>

 4、修改数据后加上

this.$set(this.state, 'list', newArr.concat(list))
this.uuid = getid();

 方法二：在el-table中添加一个key，可以设置成boolean类型的，在数据更新后更新这个key;

1、绑定key值，:key="isUpdate"

2、props里面定义isUpdate

 3、子组件定义

4、在更新数据的后面加上

this.isUpdate = !this.isUpdate;