el-table中的el-input标签修改值,但界面未更新,解决方法
这个问题通常是因为你在Vue组件中直接修改了data
以外的变量,或者修改了数组但没有使用Vue提供的特定方法。
解决方法:
- 确保你是在修改响应式对象的属性。如果你是直接赋值给数组的索引,应该使用
Vue.set
方法或者以新数组替换旧数组。 - 如果你在使用Vuex,确保你是通过mutation来修改状态。
例如,如果你有一个表格,其中一个单元格是一个el-input
,你的数据可能是这样的:
data() {
return {
tableData: [
{ id: 1, name: 'Alice' },
{ id: 2, name: 'Bob' }
]
};
}
当你想要更新某个name
时,确保你这样做:
methods: {
updateName(rowIndex, newName) {
this.$set(this.tableData, rowIndex, { ...this.tableData[rowIndex], name: newName });
// 或者如果你是用新数组替换旧数组的方式
// this.tableData = [...this.tableData.slice(0, rowIndex), { ...this.tableData[rowIndex], name: newName }, ...this.tableData.slice(rowIndex + 1)];
}
}
在el-input
中使用这个方法:
<el-table :data="tableData">
<el-table-column label="Name">
<template slot-scope="scope">
<el-input v-model="scope.row.name" @change="updateName(scope.$index, scope.row.name)"></el-input>
</template>
</el-table-column>
</el-table>
这样,当你在输入框中修改值时,tableData
数组中的对应项会更新,UI也会随之更新。
评论已关闭