快捷導(dǎo)航

解決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中使用canvas方法總結(jié)
在本篇內(nèi)容中小編給大家分享了關(guān)于Vue中使用canvas方法和步驟，對(duì)此有需要的讀者們參考學(xué)習(xí)下。
2019-02-02
在Vue Router中定義路由規(guī)則的操作方法
在現(xiàn)代Web開(kāi)發(fā)中,前端框架的使用越來(lái)越普遍,而Vue.js作為一款優(yōu)秀的前端框架,其生態(tài)系統(tǒng)中有著非常重要的一個(gè)組件——Vue Router,在本篇博客中,我們將深入探討如何在Vue Router中定義路由規(guī)則,需要的朋友可以參考下
2024-12-12
vue導(dǎo)出excel表格并支持樣式及行高修改
這篇文章主要為大家介紹了vue導(dǎo)出excel表格并支持樣式及行高修改，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-06-06
vue.js 實(shí)現(xiàn)點(diǎn)擊按鈕動(dòng)態(tài)添加li的方法
今天小編就為大家分享一篇vue.js 實(shí)現(xiàn)點(diǎn)擊按鈕動(dòng)態(tài)添加li的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-09-09
vue中實(shí)現(xiàn)拖動(dòng)調(diào)整左右兩側(cè)div的寬度的示例代碼
這篇文章主要介紹了vue中實(shí)現(xiàn)拖動(dòng)調(diào)整左右兩側(cè)div的寬度的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-07-07
Vue過(guò)濾器（filter）實(shí)現(xiàn)及應(yīng)用場(chǎng)景詳解
在Vue中使用過(guò)濾器（Filters）來(lái)渲染數(shù)據(jù)是一種很有趣的方式,下面這篇文章主要給大家介紹了關(guān)于Vue過(guò)濾器（filter）實(shí)現(xiàn)及應(yīng)用場(chǎng)景的相關(guān)資料,需要的朋友可以參考下
2021-06-06
vue 解決setTimeOut和setInterval函數(shù)無(wú)效報(bào)錯(cuò)的問(wèn)題
這篇文章主要介紹了vue 解決setTimeOut和setInterval函數(shù)無(wú)效報(bào)錯(cuò)的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-07-07
vue2從數(shù)據(jù)到視圖渲染之模板渲染詳解
這篇文章主要為大家介紹了vue2從數(shù)據(jù)到視圖渲染之模板渲染詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-09-09
Vue3?+?Three.js實(shí)現(xiàn)自定義3D模型加載與交互實(shí)戰(zhàn)全流程
Three.js是一個(gè)用于創(chuàng)建3D圖形的JavaScript庫(kù),它基于WebGL技術(shù),并提供了一系列的工具和API,這篇文章主要介紹了Vue3?+?Three.js實(shí)現(xiàn)自定義3D模型加載與交互實(shí)戰(zhàn)的相關(guān)資料,需要的朋友可以參考下
2025-12-12
vue3使用SSE實(shí)現(xiàn)前端全局事件通訊方式
文章介紹了使用Vue3和VueUse實(shí)現(xiàn)基于SSE（Server-Sent Events）的全局事件通訊系統(tǒng),SSE具有單向通信、基于HTTP、自動(dòng)重連和輕量級(jí)等特點(diǎn),適合實(shí)時(shí)性要求高的應(yīng)用,實(shí)現(xiàn)方案包括訂閱消息、取消訂閱和關(guān)閉連接等功能
2025-10-10