快捷導(dǎo)航

element表格變化后自動(dòng)刷新的兩種方案

更新時(shí)間：2023年04月28日 10:40:23 作者：NoBug.

本文主要介紹了element表格變化后自動(dòng)刷新的兩種方案，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

方案一：

在table上加上:key="Math.random()"，但是這種方法需要觸發(fā)熱更新才會(huì)刷新數(shù)據(jù)，比如保存

<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="價(jià)格" 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>

方案二：

定義成響應(yīng)式數(shù)據(jù)

如果定義成 const goodsList = [ ] 是不會(huì)自動(dòng)刷新的

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

到此這篇關(guān)于element表格變化后自動(dòng)刷新的兩種方案的文章就介紹到這了,更多相關(guān)element表格自動(dòng)刷新內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

vue.js組件vue-waterfall-easy實(shí)現(xiàn)瀑布流效果
這篇文章主要為大家詳細(xì)介紹了vue.js實(shí)現(xiàn)瀑布流之vue-waterfall-easy的相關(guān)資料，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-08-08
Vue-cli assets SubDirectory及PublicPath區(qū)別詳解
這篇文章主要介紹了Vue-cli assets SubDirectory及PublicPath區(qū)別詳解,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2020-08-08
vue3選項(xiàng)式api如何監(jiān)控?cái)?shù)組變化
這篇文章主要介紹了vue3選項(xiàng)式api如何監(jiān)控?cái)?shù)組變化問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-06-06
快速了解vue-cli 3.0 新特性
vue-cli 是 vue 官方團(tuán)隊(duì)推出的一款快速開發(fā) vue 項(xiàng)目的構(gòu)建工具，具有開箱即用并且提供簡潔的自定義配置等功能。這篇文章主要介紹了快速了解vue-cli 3.0 新特性,需要的朋友可以參考下
2018-02-02
在Vue中使用CSS3實(shí)現(xiàn)內(nèi)容無縫滾動(dòng)的示例代碼
這篇文章主要介紹了在Vue中使用CSS3實(shí)現(xiàn)內(nèi)容無縫滾動(dòng)的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-11-11
vue3 開始時(shí)間與結(jié)束時(shí)間比較驗(yàn)證(結(jié)束時(shí)間需要大于開始時(shí)間)
本文通過示例代碼介紹了vue3 開始時(shí)間與結(jié)束時(shí)間比較驗(yàn)證(結(jié)束時(shí)間需要大于開始時(shí)間)的相關(guān)操作,代碼簡單易懂,感興趣的朋友跟隨小編一起看看吧
2024-07-07
vue3使用mqtt的示例代碼
這篇文章主要介紹了vue3使用mqtt的實(shí)例代碼，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2023-04-04
Vant?UI中van-collapse下拉折疊面板默認(rèn)展開第一項(xiàng)的方法
之前做項(xiàng)目的時(shí)候,使用了Collapse折疊面板,下面這篇文章主要給大家介紹了關(guān)于Vant?UI中van-collapse下拉折疊面板默認(rèn)展開第一項(xiàng)的相關(guān)資料,需要的朋友可以參考下
2022-03-03
Vue表單輸入的雙向綁定失效原因與解決方案
在Vue.js開發(fā)中,雙向綁定是實(shí)現(xiàn)表單輸入與數(shù)據(jù)同步的核心特性之一,然而,在實(shí)際開發(fā)中,開發(fā)者可能會(huì)遇到雙向綁定失效的問題,導(dǎo)致表單輸入無法正確更新數(shù)據(jù)或視圖,本文將探討雙向綁定失效的常見原因,并提供相應(yīng)的解決方案,需要的朋友可以參考下
2025-03-03
詳解element-ui動(dòng)態(tài)限定的日期范圍選擇器代碼片段
這篇文章主要介紹了element-ui動(dòng)態(tài)限定的日期范圍選擇器代碼片段，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-07-07