解決vue數(shù)據(jù)更新但table內(nèi)容不更新的問題
更新時(shí)間：2023年08月10日 10:37:27 作者：北巷`
這篇文章主要給大家介紹了vue數(shù)據(jù)更新table內(nèi)容不更新解決方法,文中有詳細(xì)的代碼示例供大家作為參考,感興趣的同學(xué)可以參考閱讀一下
場(chǎng)景：
table組件綁定的數(shù)據(jù)變化時(shí)，頁(yè)面沒有重新渲染，常見于子組件中使用table組件
原理：
創(chuàng)建實(shí)例時(shí) 數(shù)組在vue中沒有被監(jiān)聽到，屬于非響應(yīng)式數(shù)據(jù)，數(shù)組的下標(biāo)變化無(wú)法監(jiān)聽到
解決方式：
<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中重寫的數(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)容不更新的問題的文章就介紹到這了,更多相關(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
這篇文章主要給大家介紹了關(guān)于vite基本常見配置講解的相關(guān)資料,最近做項(xiàng)目要求將webpack打包方式換成vite,下面將詳細(xì)講解一下配置vite需要改動(dòng)的東西,需要的朋友可以參考下2023-11-11
Vue3 DOM是Vue.js框架的一部分，用于處理與瀏覽器DOM相關(guān)的操作，它提供了一組API和工具，使開發(fā)者能夠輕松地操作和管理DOM元素，本文給大家介紹了Vue3獲取元素DOM的兩種方法：ref模板引用和傳統(tǒng)方法，并有詳細(xì)的代碼示例,需要的朋友可以參考下2024-04-04
這篇文章主要介紹了vue同個(gè)按鈕控制展開和折疊同個(gè)事件操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧2020-07-07
這篇文章主要介紹了VUE3子表格嵌套分頁(yè)查詢互相干擾的問題解決方案,如果不需要做子表格的分頁(yè)查詢，那么可以直接在主表格中嵌套子表格，本文給大家介紹兩種方式，需要的朋友可以參考下2024-01-01
Vue通過moment插件實(shí)現(xiàn)獲取當(dāng)前月的第一天和最后一天
這篇文章主要介紹了Vue 結(jié)合插件moment 實(shí)現(xiàn)獲取當(dāng)前月的第一天和最后一天,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2023-10-10
這篇文章主要介紹了vue中子組件調(diào)用兄弟組件方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2018-07-07
本篇文章主要介紹了深入理解Vue官方文檔梳理之全局API，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(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 組件包),需要的朋友可以參考下2017-05-05