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

最新推荐文章于 2025-02-08 10:07:04 发布

原创最新推荐文章于 2025-02-08 10:07:04 发布 · 4.5k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端 #elementui #html

Vue 同时被 2 个专栏收录

17 篇文章

订阅专栏

其他

2 篇文章

订阅专栏

文章介绍了两种方法来利用Vue的key属性优化el-table组件的渲染。当数据更新时，通过更改key值强制Vue重新渲染表格。方法一是使用UUID生成唯一的key，数据改变后更新UUID；方法二是使用boolean类型的key，数据更新后翻转其值。这两种方法能确保表格在数据变化时正确显示最新内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

方法一：在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;