Vue Element UI: 表格行内编辑与动态增删实战

在Vue前后端分离项目中，使用Element UI框架构建时，实现el-table的行内编辑功能是一项常见的需求。本文将详细介绍如何通过自定义表头、动态增删行以及状态判断来完成这一功能。 首先，我们从自定义表头开始。在el-table的头部模板中，我们需要添加一个“新增”按钮，以便用户可以点击后在当前行下方动态插入新行。使用v-model绑定`handleAdd`方法，当用户点击这个按钮时，会调用`handleAdd(index, row)`函数，其中`index`是当前行的索引，`row`是该行的数据对象。这个函数可以用来根据用户选择或输入的信息创建一个新的表格行。 ```html <template slot="header"> <el-button v-model="handleAdd" size="mini" type="success" round plain @click="handleAdd($index, $row)">{{ $t('common.add') }}</el-button> </template> ``` 接下来，处理动态增删行操作。创建一个名为`row`的新对象，包含了表格行的基本属性，如code、maxValue等，并将其推入`propTableData.col`数组，从而更新表格数据。同时，为了跟踪当前编辑的行数据，我们需要保存在`propTableData.sel`中。 ```javascript let newRow = { // 表格行属性... }; this.propTableData.col.push(newRow); this.propTableData.sel = newRow; ``` 当子组件需要删除一行时，通过`$emit`触发父组件的`delete`事件，传递需要删除的行的id作为参数。 ```javascript this.$emit('delete', row.id); ``` 对于行内编辑状态的控制，我们会在每行的按钮元素上添加v-if指令，判断当前行是否处于编辑状态。编辑状态通常可以通过一个布尔变量`s`来标识，例如，当行被选中时设置为true，取消编辑时恢复为false。这样，只有在非编辑状态下，才会显示添加、修改或删除按钮。 ```html <template slot-scope="scope"> <el-button v-if="!scope.$parent.s" ...></el-button> <!-- 其他按钮元素... --> </template> ``` 实现el-table的行内编辑功能需要结合Vue的响应式特性、数据驱动视图以及Element UI提供的组件API。通过自定义表头、监听数据变化和状态管理，我们可以轻松地在前端展示并管理动态增删的表格数据。希望这些步骤能帮助你在项目中快速实现所需功能。