vue 解决el-table 表体数据发生变化时，未重新渲染问题｜页面不更新问题

第一种情况，直接把key写在表格上

一、所遇到的问题

在使用el-table组件时，数据已经发生了变化，但是页面显示的数据却没变化;

二、解决办法

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

 1  <el-table :data="currentRecordList" :key="isUpdate">
 2       <el-table-column prop="address" label="Sender" min-width="10%" />
 3       <el-table-column prop="date" label="Date" min-width="15%" />
 4       <el-table-column label="Message conten" min-width="40%">
 5         <template slot-scope="scope">
 6           <span v-if="scope.row.bodyHighlights" v-html="scope.row.bodyHighlights"></span>
 7           <span v-else>{{ scope.row.body }}</span>
 8         </template>
 9       </el-table-column>
10     </el-table>

在数据更新的地方后面加上如下 

this.isUpdate = !this.isUpdate;

 第二种情况，可能只需要更新某一列的某一个数据，那么直接把key放在这列上就可以

<el-table-column prop="expectedAmount" label="预计支付金额" :key="isUpdate" />

data() {
  return {
    isUpdate: Math.random(),
  }  
}

再你更新某一个数据之后
再调一次这个参数 
this.isUpdate = Math.random();

 

参考以下链接：https://blog.csdn.net/qq_24950043/article/details/114292940

posted @ 2022-11-17 11:50  维维WW  阅读(9322)  评论(0)  编辑  收藏  举报