刷新组件

最新推荐文章于 2024-10-22 15:16:11 发布

原创最新推荐文章于 2024-10-22 15:16:11 发布 · 466 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#强制刷新

本文介绍了在表格操作中如何强制组件刷新的两种常见方法：利用v-if进行刷新和通过更改key值实现组件的重新渲染。

强制组件刷新的几种方法

在做表格的时候需要对表格进行刷新一般情况是有两种刷新的方法：

v-if刷新

<template>
  <editor
    v-if="isRouterAlive"
  >
  </editor>
</template>

data() {
    return {
      isRouterAlive: true, // 是否销毁
      destory: true, // 销毁组件
      }
   }
methods: {
    reload() {
      this.isRouterAlive = false
      this.$nextTick(() => (this.isRouterAlive = true))
    }
  }

使用key值刷新

<el-table
          :key="menuKey"
          v-loading="(params.queryType === 1 && loading) || LineChooseLoading"
          height="500px"
          :data="tableData || []"
          border
          :row-class-name="tableRowClassName"
        >
 
data() {
    return {
      menuKey: 1, // table需要刷新的key值
    }
  },
     handleCheckedCitiesChange(value) {
      // alButton 记录的是上一次选择的环节
      this.$emit('fresh')
      this.tableData = []
   
      ++this.menuKey
      }