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