快捷導(dǎo)航

elementUI的table表格改變數(shù)據(jù)不更新問題解決

更新時(shí)間：2022年02月24日 10:50:16 作者：三個(gè)木馬人

最近在做vue的項(xiàng)目時(shí)發(fā)現(xiàn)了一個(gè)問題，今天就來解決一下，本文主要介紹了elementUI的table表格改變數(shù)據(jù)不更新問題解決，感興趣的可以了解一下

預(yù)期效果：點(diǎn)擊輸入框旁邊的圖標(biāo)，輸入框變?yōu)榭奢斎霠顟B(tài)；這里控制輸入的 editable 字段不是 data 原有的屬性，也不是 data 賦值時(shí)就存在的字段。

在這里插入圖片描述

問題原因：在 Vue 實(shí)例創(chuàng)建時(shí)，以及 data 賦值時(shí) editable 并未聲明，因此就沒有被Vue轉(zhuǎn)換為響應(yīng)式的屬性，自然就不會(huì)觸發(fā)視圖的更新。

解決方法：

1、給 data 賦值前把 editable 屬性添加到數(shù)組里

這里就不貼代碼了，大概思路就是：獲取到列表信息之后緩存在一個(gè)臨時(shí)數(shù)組里（不可以是 data 里面定義好的對(duì)象），循環(huán)遍歷列表信息，給每一條數(shù)據(jù)都添加一個(gè)屬性 editable 值為 false，然后再把處理過的列表信息賦值給 data 。

2、使用：key 或者 v-if

修改綁定在 table 上面的 key 值，可以觸發(fā) table 的重新渲染，這樣就可以把修改后的 data 在表格里面更新渲染。

<el-table :data="data" :key='num' stripe border>
	<el-table-column align="center" label="字段中文名稱">
		<template slot-scope="scope">
    		<div style="display: flex;">
    			<el-input :disabled='!scope.row.editable' style="margin-right: 10px;"></el-input>
    			<el-button @click='changeEdit(scope.row)' type='text' icon="el-icon-edit-outline"></el-button>
    		</div>
    	</template>
    </el-table-column>
</el-table>
export default{
	data(){
		return{
			num:0，
			data:[]
		}
	},
	methods:{
		changeEdit(row){
			//每次點(diǎn)擊圖標(biāo) key 自動(dòng)加一
			row.editable = true;
			num++;
		}
	}
}

這種方法有一個(gè)問題：給 table 添加一個(gè)默認(rèn)高度，這個(gè)時(shí)候數(shù)據(jù)比較多的話會(huì)出現(xiàn)滾動(dòng)條；當(dāng)滾動(dòng)條拉到下面，點(diǎn)擊圖標(biāo)讓對(duì)應(yīng)的輸入框可編輯，同時(shí)觸發(fā) table 渲染，滾動(dòng)條會(huì)回到頂部，想查看被操作的輸入框需要重新把滾動(dòng)條拉到最下面；這樣體驗(yàn)非常不好。如果有這樣的場(chǎng)景推薦使用下面的方法。

3、使用 $set

$set 可以讓動(dòng)態(tài)的給 data 添加響應(yīng)式的屬性，讓 editable 變?yōu)轫憫?yīng)式的，就可以直接觸發(fā)頁(yè)面更新。

<el-table :data="data" stripe border>
	<el-table-column align="center" label="字段中文名稱">
		<template slot-scope="scope">
    		<div style="display: flex;">
    			<el-input :disabled='!scope.row.editable' style="margin-right: 10px;"></el-input>
    			<el-button @click='changeEdit(scope.$index,scope.row)' type='text' icon="el-icon-edit-outline"></el-button>
    		</div>
    	</template>
    </el-table-column>
</el-table>
export default{
	data(){
		return{
			num:0,
			data:[]
		}
	},
	methods:{
		changeEdit(index,row){
			row.editable = true;
        	this.$set(this.data,index,row);
		}
	}
}

根據(jù)上面的方法延伸：當(dāng) vue 能夠檢測(cè)到數(shù)組的變化，觸發(fā)更新。

changeEdit(index,row){
	row.editable = true;
    this.data.splice(1,0);
}

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

您可能感興趣的文章: