element-plus表格内可编辑

### 实现Element Plus表格组件中的行内编辑 为了实现在Element Plus的`el-table`组件中进行行内编辑，可以采用两种主要方法来处理单元格的数据交互： #### 方法一：通过自定义模板实现单元格编辑 这种方法涉及为特定列设置插槽(slot)，以便能够插入可编辑控件，比如输入框、选择器等。当用户完成编辑操作时(如失去焦点或按下回车键),触发相应的事件处理器以更新数据模型。 ```html <template> <el-table :data="tableData"> <!-- 定义一个具有编辑能力的列 --> <el-table-column prop="name" label="Name"> <template #default="scope"> <span v-if="!scope.row.editing">{{ scope.row.name }}</span> <el-input v-else v-model="scope.row.name"></el-input> </template> </el-table-column> <!-- 编辑按钮 --> <el-table-column fixed="right" width="100px"> <template #header> <el-button size="small" type="primary" @click="addRow">Add Row</el-button> </template> <template #default="scope"> <el-button size="mini" @click="edit(scope.$index)">Edit</el-button> <el-button size="mini" type="danger" @click="remove(scope.$index)">Delete</el-button> </template> </el-table-column> </el-table> </template> <script setup> import { ref, reactive } from 'vue'; const tableData = reactive([ { name: "John Doe", editing: false, }, ]); function addRow() { const newRow = { name: "", editing: true }; tableData.push(newRow); } function edit(index) { tableData[index].editing = !tableData[index].editing; } function remove(index) { tableData.splice(index, 1); } </script> ``` 上述代码展示了如何利用Vue3响应式特性以及Element Plus提供的API接口[^1]，实现了基本的添加新行(`addRow`)、切换编辑状态(`edit`)和删除指定索引位置上的记录(`remove`)的功能。 #### 方法二：使用子组件封装编辑逻辑 另一种更模块化的方式是创建独立的小型编辑组件(EditComponent)，这些组件负责管理自己的内部状态，并且只暴露必要的属性给外部调用者。这种方式有助于提高代码复用性和维护性。 ```html <!-- EditableCell.vue 文件内容如下 --> <template> <div> <input v-model="localValue" @blur="handleBlur"/> </div> </template> <script> export default { props: ["modelValue"], emits: ["update:modelValue"], data(){ return{ localValue:this.modelValue } }, watch:{ modelValue(newValue){ this.localValue=newValue; } }, methods: { handleBlur(event){ this.$emit('update:modelValue', event.target.value); } } }; </script> ``` 接着可以在主页面引入这个小型编辑组件作为表格某一列的内容展示方式: ```html <template> <el-table :data="tableData"> <el-table-column prop="price" label="Price"> <template #default="scope"> <editable-cell :model-value="scope.row.price" @update:model-value="(newValue)=>{scope.row.price=newValue}"/> </template> </el-table-column> ... </el-table> </template> <script setup> // 导入并注册EditableCell组件... </script> ``` 这里的关键在于理解v-model指令的工作原理及其背后的机制——即`.sync`修饰符已经被废弃的情况下，推荐使用带有冒号前缀的形式传递prop值，并监听对应的自定义事件来进行双向绑定[^2]。