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

這篇文章主要介紹“elementUI的table表格改變數(shù)據(jù)不更新問題如何解決”的相關(guān)知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“elementUI的table表格改變數(shù)據(jù)不更新問題如何解決”文章能幫助大家解決問題。

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

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

解決方法：

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

這里就不貼代碼了，大概思路就是：獲取到列表信息之后緩存在一個臨時數(shù)組里（不可以是 data 里面定義好的對象），循環(huán)遍歷列表信息，給每一條數(shù)據(jù)都添加一個屬性 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 >
    			<el-input :disabled='!scope.row.editable' ></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){
			//每次點擊圖標 key 自動加一
			row.editable = true;
			num++;
		}
	}
}

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

3、使用 $set

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

<el-table :data="data" stripe border>
	<el-table-column align="center" label="字段中文名稱">
		<template slot-scope="scope">
    		<div >
    			<el-input :disabled='!scope.row.editable' ></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ù)上面的方法延伸 ：當 vue 能夠檢測到數(shù)組的變化，觸發(fā)更新。

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

關(guān)于“elementUI的table表格改變數(shù)據(jù)不更新問題如何解決”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識，可以關(guān)注億速云行業(yè)資訊頻道，小編每天都會為大家更新不同的知識點。