element表格变化后自动刷新的两种方案

 更新时间:2023年04月28日 10:40:23   作者:NoBug.  
本文主要介绍了element表格变化后自动刷新的两种方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

方案一:

在table上加上:key="Math.random()",但是这种方法需要触发热更新才会刷新数据,比如保存

<el-table :key="Math.random()" :data="goodsList" style="width: 100%">
    <el-table-column label="ID" width="180">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <span style="margin-left: 10px">{{ scope.row.id }}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="商品名" width="180">
      <template #default="scope">
        <el-popover effect="light" trigger="hover" placement="top" width="auto">
          <template #default>
            <div>name: {{ scope.row.name }}</div>
          </template>
          <template #reference>
            <el-tag>{{ scope.row.name }}</el-tag>
          </template>
        </el-popover>
      </template>
    </el-table-column>
    <el-table-column label="图片" width="180">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <span style="margin-left: 10px">...</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="价格" width="180">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <span style="margin-left: 10px">{{ scope.row.price }}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.$index, scope.row)">
          Edit
        </el-button>
        <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">
          Delete
        </el-button>
      </template>
    </el-table-column>
  </el-table>

方案二:

定义成响应式数据

如果定义成 const goodsList = [ ] 是不会自动刷新的

定义成 const goodsList = ref([ ]) 就行

到此这篇关于element表格变化后自动刷新的两种方案的文章就介绍到这了,更多相关element表格自动刷新内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Vue脚手架的创建超详解步骤

    Vue脚手架的创建超详解步骤

    这篇文章主要给大家介绍了关于Vue脚手架创建的相关资料,Vue脚手架是vue官方提供的标准化开发工具(平台),文中通过代码以及图文介绍的非常详细,需要的朋友可以参考下
    2024-01-01
  • 详解Vue微信公众号开发踩坑全记录

    详解Vue微信公众号开发踩坑全记录

    本篇文章主要介绍了详解Vue微信公众号开发踩坑全记录,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • webpack+vue-cli项目中引入外部非模块格式js的方法

    webpack+vue-cli项目中引入外部非模块格式js的方法

    今天小编就为大家分享一篇webpack+vue-cli项目中引入外部非模块格式js的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • Vue3之列表动画和状态动画示例详解

    Vue3之列表动画和状态动画示例详解

    这篇文章主要为大家介绍了Vue3之列表动画和状态动画示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-04-04
  • vue-cli3 从搭建到优化的详细步骤

    vue-cli3 从搭建到优化的详细步骤

    这篇文章主要介绍了vue-cli3 从搭建到优化的详细步骤,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-01-01
  • Vue实现未登录跳转到登录页的示例代码

    Vue实现未登录跳转到登录页的示例代码

    本文主要介绍了Vue实现未登录跳转到登录页的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-08-08
  • 关于导入、配置Vuetify遇到的几个问题

    关于导入、配置Vuetify遇到的几个问题

    这篇文章主要介绍了关于导入、配置Vuetify遇到的几个问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-06-06
  • vue实现列表拖拽排序的示例代码

    vue实现列表拖拽排序的示例代码

    本文主要介绍了vue实现列表拖拽排序的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-04-04
  • vue select选择框数据变化监听方法

    vue select选择框数据变化监听方法

    今天小编就为大家分享一篇vue select选择框数据变化监听方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • vue3常用的API使用简介

    vue3常用的API使用简介

    这篇文章主要介绍了vue3常用的API使用简介,帮助大家更好的理解和学习使用vue,感兴趣的朋友可以了解下
    2021-03-03

最新评论