elementUI的table表格改變數據不更新問題解決

Posted on by

預期效果：點擊輸入框旁邊的圖標，輸入框變為可輸入狀態；這裡控制輸入的 editable 字段不是 data 原有的屬性，也不是 data 賦值時就存在的字段。

在這裡插入圖片描述

問題原因：在 Vue 實例創建時，以及 data 賦值時 editable 並未聲明，因此就沒有被Vue轉換為響應式的屬性，自然就不會觸發視圖的更新。

解決方法：

1、給 data 賦值前把 editable 屬性添加到數組裡

這裡就不貼代碼瞭，大概思路就是：獲取到列表信息之後緩存在一個臨時數組裡（不可以是 data 裡面定義好的對象），循環遍歷列表信息，給每一條數據都添加一個屬性 editable 值為 false，然後再把處理過的列表信息賦值給 data 。

2、使用：key 或者 v-if

修改綁定在 table 上面的 key 值，可以觸發 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){
			//每次點擊圖標 key 自動加一
			row.editable = true;
			num++;
		}
	}
}

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

3、使用 $set

$set 可以讓動態的給 data 添加響應式的屬性，讓 editable 變為響應式的，就可以直接觸發頁面更新。

<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);
		}
	}
}

根據上面的方法延伸 ：當 vue 能夠檢測到數組的變化，觸發更新。

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

到此這篇關於elementUI的table表格改變數據不更新問題解決的文章就介紹到這瞭,更多相關element table數據不更新內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：