解決vue數(shù)據(jù)更新但table內(nèi)容不更新的問題
更新時間：2023年08月10日 10:37:27 作者：北巷`
這篇文章主要給大家介紹了vue數(shù)據(jù)更新table內(nèi)容不更新解決方法,文中有詳細的代碼示例供大家作為參考,感興趣的同學可以參考閱讀一下
場景：
table組件綁定的數(shù)據(jù)變化時，頁面沒有重新渲染，常見于子組件中使用table組件
原理：
創(chuàng)建實例時 數(shù)組在vue中沒有被監(jiān)聽到，屬于非響應式數(shù)據(jù)，數(shù)組的下標變化無法監(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ā)組件渲染
changeTableData(){
this.tamptime = new Date().valueOf()
this.tabledata = newtabledata
}3、使用$set()
changeTableData(){
this.$set(tabledata,1,'newvalue')
}到此這篇關于解決vue數(shù)據(jù)更新但table內(nèi)容不更新的問題的文章就介紹到這了,更多相關vue數(shù)據(jù)更新table內(nèi)容不更新內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了在vue項目中配置你自己的啟動命令和打包命令方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要給大家介紹了關于vite基本常見配置講解的相關資料,最近做項目要求將webpack打包方式換成vite,下面將詳細講解一下配置vite需要改動的東西,需要的朋友可以參考下2023-11-11
Vue3 DOM是Vue.js框架的一部分，用于處理與瀏覽器DOM相關的操作，它提供了一組API和工具，使開發(fā)者能夠輕松地操作和管理DOM元素，本文給大家介紹了Vue3獲取元素DOM的兩種方法：ref模板引用和傳統(tǒng)方法，并有詳細的代碼示例,需要的朋友可以參考下2024-04-04
這篇文章主要介紹了vue同個按鈕控制展開和折疊同個事件操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要介紹了VUE3子表格嵌套分頁查詢互相干擾的問題解決方案,如果不需要做子表格的分頁查詢，那么可以直接在主表格中嵌套子表格，本文給大家介紹兩種方式，需要的朋友可以參考下2024-01-01
Vue通過moment插件實現(xiàn)獲取當前月的第一天和最后一天
這篇文章主要介紹了Vue 結合插件moment 實現(xiàn)獲取當前月的第一天和最后一天,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧2023-10-10
這篇文章主要介紹了vue中子組件調(diào)用兄弟組件方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
本篇文章主要介紹了深入理解Vue官方文檔梳理之全局API，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
Vue表單驗證中的prop屬性用于指定需要驗證的表單字段,它定義了字段名稱并與驗證規(guī)則關聯(lián),確保數(shù)據(jù)的完整性和準確性,本文就來介紹一下element的el-form-item的prop作用,感興趣的可以了解一下2025-01-01
這篇文章主要介紹了基于Vue的文字跑馬燈組件(npm 組件包),需要的朋友可以參考下2017-05-05