el-table嵌套el-select el-table值变化只更新最后一条数据

### 解决 `el-table` 中嵌套 `el-select` 表格值变化只更新最后一行数据的问题 当遇到 `el-table` 中嵌套 `el-select` 的情况时，如果发现表格中的值发生变化却仅影响到了最后一行的数据，这通常是因为 Vue 对象的响应式机制未能正确追踪到对象内部属性的变化。为了确保每次更改都能被正确识别并反映在界面上，可以采取以下措施： #### 使用 `$set` 方法手动触发变更检测 Vue 不会自动跟踪动态添加到已创建实例上的新属性。因此，在修改数组内对象的属性时应使用 `this.$set` 或者其别名 `vm.$set` 来替代直接赋值操作。 ```javascript methods: { handleSelectionChange(row, index) { this.$set(this.tableData[index], 'setUp', row.setUp); } } ``` 此方法通过显式调用 `$set` 函数来通知 Vue 发生了改变，从而使得视图能够及时刷新显示最新的状态[^3]。 #### 绑定正确的 v-model 路径 另一个常见问题是由于错误绑定了 `v-model` 导致所有行共享相同的模型变量。应该确保每行都有独立的状态管理，即为每一项指定唯一的键路径作为绑定目标。 ```html <template> <el-table :data="tableData"> <!-- ...其他列定义... --> <el-table-column prop="setUp" label="入账设置"> <template slot-scope="scope"> <el-select v-model="scope.row.setUp" @change="handleSelectionChange(scope.row, scope.$index)"> <el-option v-for="item in setUpOptions" :key="item.value" :label="item.label" :value="item.value"></el-option> </el-select> </template> </el-table-column> </el-table> </template> <script> export default { data() { return { setUpOptions: [ { label: "正常", value: 1 }, { label: "后置", value: 2 } ], tableData: [ // 初始化数据... ] }; }, }; </script> ``` 上述代码片段展示了如何利用 `slot-scope` 获取当前行的信息，并将其传递给事件处理器以便于后续处理逻辑中定位具体哪一行发生了变动[^4]。 #### 完整示例代码展示 下面是一个完整的例子，它包含了初始化数据结构、模板渲染以及交互逻辑等方面的内容： ```html <div id="app"> <el-table :data="tableData"> <el-table-column prop="ftkmName" label="分摊科目名称"></el-table-column> <el-table-column prop="ftkmCode" label="分摊科目编码"></el-table-column> <el-table-column prop="month" label="分摊月份"></el-table-column> <el-table-column prop="setUp" label="入账设置"> <template slot-scope="scope"> <el-select v-model="scope.row.setUp" placeholder="请选择" @change="handleChange(scope.$index, $event)"> <el-option v-for="(option, idx) in setUp" :key="idx" :label="option.label" :value="option.value"></el-option> </el-select> </template> </el-table-column> </el-table> </div> <script src="https://unpkg.com/vue@next"></script> <script src="https://unpkg.com/element-plus/lib/index.full.js"></script> <link rel="stylesheet" href="https://unpkg.com/element-plus/lib/theme-chalk/index.css"> <script type="module"> import { createApp } from 'vue'; createApp({ setup() {}, data() { return { setUp: [{ label: '正常', value: 1 }, { label: '后置', value: 2 }], tableData: [ { ftkmName: '', ftkmCode: '', month: new Date().toISOString().slice(0, 7), setUp: '' }, { ftkmName: '', ftkmCode: '', month: new Date().toISOString().slice(0, 7), setUp: '' } ] }; }, methods: { handleChange(index, newValue) { console.log(`Row ${index} changed to`, newValue); this.$set(this.tableData[index], 'setUp', newValue); // 确保响应式的更新 } } }).mount('#app'); </script> ``` 这段代码实现了在一个简单的 HTML 页面上加载 Element Plus 库，并构建了一个带有可编辑选项的选择框列的表格。每当用户选择了不同的选项时，都会触发相应的回调函数来进行必要的业务逻辑处理。