解決vue數(shù)據(jù)更新但table內(nèi)容不更新的問(wèn)題

更新時(shí)間：2023年08月10日 10:37:27 作者：北巷`

這篇文章主要給大家介紹了vue數(shù)據(jù)更新table內(nèi)容不更新解決方法,文中有詳細(xì)的代碼示例供大家作為參考,感興趣的同學(xué)可以參考閱讀一下

場(chǎng)景：

table組件綁定的數(shù)據(jù)變化時(shí)，頁(yè)面沒(méi)有重新渲染，常見(jiàn)于子組件中使用table組件

原理：

創(chuàng)建實(shí)例時(shí) 數(shù)組在vue中沒(méi)有被監(jiān)聽(tīng)到，屬于非響應(yīng)式數(shù)據(jù)，數(shù)組的下標(biāo)變化無(wú)法監(jiān)聽(tīng)到

解決方式：

    <el-table
          :key="tamptime"
          stripe
          border
          fit
          height="450"
          :data="tabledata"
          style="width: 100%"
        >
          <el-table-column
            v-for="i in pretabledatacolumn"
            :key="i.index"
            show-overflow-tooltip
            :prop="i"
            :label="i"
            width="230"
          />
        </el-table>
data(){
    return {
        tabledata:[],
        pretabledatacolumn:[],
        tamptime:new Date().valueOf()
    }
}
methods:{
	changeTableData(){
		this.tabledata = []
	}
}

1、利用vue中重寫(xiě)的數(shù)組方法
splice，split，concat…

changeTableData(){
	this.tabledata.splice(1,0)
}

2、為table綁定一個(gè)key，數(shù)據(jù)變化時(shí)更改key值,或者使用v-if綁定一個(gè)不重復(fù)的值觸發(fā)組件渲染

changeTableData(){
		this.tamptime = new Date().valueOf()
		this.tabledata = newtabledata
	}

3、使用$set()

changeTableData(){
	this.$set(tabledata,1,'newvalue')
	}

到此這篇關(guān)于解決vue數(shù)據(jù)更新但table內(nèi)容不更新的問(wèn)題的文章就介紹到這了,更多相關(guān)vue數(shù)據(jù)更新table內(nèi)容不更新內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

在vue項(xiàng)目中配置你自己的啟動(dòng)命令和打包命令方式
這篇文章主要介紹了在vue項(xiàng)目中配置你自己的啟動(dòng)命令和打包命令方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04
vite基本常見(jiàn)的配置講解
這篇文章主要給大家介紹了關(guān)于vite基本常見(jiàn)配置講解的相關(guān)資料,最近做項(xiàng)目要求將webpack打包方式換成vite,下面將詳細(xì)講解一下配置vite需要改動(dòng)的東西,需要的朋友可以參考下
2023-11-11
Vue3獲取元素DOM的兩種方法
Vue3 DOM是Vue.js框架的一部分，用于處理與瀏覽器DOM相關(guān)的操作，它提供了一組API和工具，使開(kāi)發(fā)者能夠輕松地操作和管理DOM元素，本文給大家介紹了Vue3獲取元素DOM的兩種方法：ref模板引用和傳統(tǒng)方法，并有詳細(xì)的代碼示例,需要的朋友可以參考下
2024-04-04
vue同個(gè)按鈕控制展開(kāi)和折疊同個(gè)事件操作
這篇文章主要介紹了vue同個(gè)按鈕控制展開(kāi)和折疊同個(gè)事件操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-07-07
VUE3子表格嵌套分頁(yè)查詢互相干擾的問(wèn)題解決方案
這篇文章主要介紹了VUE3子表格嵌套分頁(yè)查詢互相干擾的問(wèn)題解決方案,如果不需要做子表格的分頁(yè)查詢，那么可以直接在主表格中嵌套子表格，本文給大家介紹兩種方式，需要的朋友可以參考下
2024-01-01
Vue通過(guò)moment插件實(shí)現(xiàn)獲取當(dāng)前月的第一天和最后一天
這篇文章主要介紹了Vue 結(jié)合插件moment 實(shí)現(xiàn)獲取當(dāng)前月的第一天和最后一天,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧
2023-10-10
vue中子組件調(diào)用兄弟組件方法
這篇文章主要介紹了vue中子組件調(diào)用兄弟組件方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-07-07
深入理解Vue官方文檔梳理之全局API
本篇文章主要介紹了深入理解Vue官方文檔梳理之全局API，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-11-11
element的el-form-item的prop作用小結(jié)
Vue表單驗(yàn)證中的prop屬性用于指定需要驗(yàn)證的表單字段,它定義了字段名稱并與驗(yàn)證規(guī)則關(guān)聯(lián),確保數(shù)據(jù)的完整性和準(zhǔn)確性,本文就來(lái)介紹一下element的el-form-item的prop作用,感興趣的可以了解一下
2025-01-01
基于Vue的文字跑馬燈組件(npm 組件包)
這篇文章主要介紹了基于Vue的文字跑馬燈組件(npm 組件包),需要的朋友可以參考下
2017-05-05