<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){
			//每次點擊圖標(biāo) key 自動加一
			row.editable = true;
			num++;
		}
	}
}

這種方法有一個問題：給 table 添加一個默認(rèn)高度，這個時候數(shù)據(jù)比較多的話會出現(xiàn)滾動條；當(dāng)滾動條拉到下面，點擊圖標(biāo)讓對應(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 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 能夠檢測到數(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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: