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.js组件vue-waterfall-easy实现瀑布流效果

    vue.js组件vue-waterfall-easy实现瀑布流效果

    这篇文章主要为大家详细介绍了vue.js实现瀑布流之vue-waterfall-easy的相关资料,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-08-08
  • Vue-cli assets SubDirectory及PublicPath区别详解

    Vue-cli assets SubDirectory及PublicPath区别详解

    这篇文章主要介绍了Vue-cli assets SubDirectory及PublicPath区别详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-08-08
  • vue3选项式api如何监控数组变化

    vue3选项式api如何监控数组变化

    这篇文章主要介绍了vue3选项式api如何监控数组变化问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-06-06
  • 快速了解vue-cli 3.0 新特性

    快速了解vue-cli 3.0 新特性

    vue-cli 是 vue 官方团队推出的一款快速开发 vue 项目的构建工具,具有开箱即用并且提供简洁的自定义配置等功能。这篇文章主要介绍了快速了解vue-cli 3.0 新特性,需要的朋友可以参考下
    2018-02-02
  • 在Vue中使用CSS3实现内容无缝滚动的示例代码

    在Vue中使用CSS3实现内容无缝滚动的示例代码

    这篇文章主要介绍了在Vue中使用CSS3实现内容无缝滚动的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-11-11
  • vue3 开始时间与结束时间比较验证(结束时间需要大于开始时间)

    vue3 开始时间与结束时间比较验证(结束时间需要大于开始时间)

    本文通过示例代码介绍了vue3 开始时间与结束时间比较验证(结束时间需要大于开始时间)的相关操作,代码简单易懂,感兴趣的朋友跟随小编一起看看吧
    2024-07-07
  • vue3使用mqtt的示例代码

    vue3使用mqtt的示例代码

    这篇文章主要介绍了vue3使用mqtt的实例代码,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-04-04
  • Vant UI中van-collapse下拉折叠面板默认展开第一项的方法

    Vant UI中van-collapse下拉折叠面板默认展开第一项的方法

    之前做项目的时候,使用了Collapse折叠面板,下面这篇文章主要给大家介绍了关于Vant UI中van-collapse下拉折叠面板默认展开第一项的相关资料,需要的朋友可以参考下
    2022-03-03
  • Vue表单输入的双向绑定失效原因与解决方案

    Vue表单输入的双向绑定失效原因与解决方案

    在Vue.js开发中,双向绑定是实现表单输入与数据同步的核心特性之一,然而,在实际开发中,开发者可能会遇到双向绑定失效的问题,导致表单输入无法正确更新数据或视图,本文将探讨双向绑定失效的常见原因,并提供相应的解决方案,需要的朋友可以参考下
    2025-03-03
  • 详解element-ui动态限定的日期范围选择器代码片段

    详解element-ui动态限定的日期范围选择器代码片段

    这篇文章主要介绍了element-ui动态限定的日期范围选择器代码片段,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-07-07

最新评论