vue2 - 实现elementUI表格组件table动态添加或删除行功能,表格列表动态新增/插入/删除表格行,可编辑单元格/点击修改表格内数据并更新数据列表(支持接口懒加载、表格分页、复杂嵌套表格)

效果图

在vue2+elementui开发中,详细实现el-table实现表格动态增加/删除/编辑表格行/编辑单元格数据等,并且带必填或其他校验规则(如果为空则提示),vue2 elementUI表格动态操作插入新行或点击编辑数据,统一保存或删除行后更新表格列表数据,一旦表格列表发生改变后,确保表格分页情况下或表格children父子级嵌套行表格正确更新数据,提供示例源码!

提供详细示例代码,新手小白复制稍微改改就能用了。

在这里插入图片描述

完整源码

具体实现思路及代码,如下所示。

Vue.js中,`el-table`是一个基于Element UI的高级表格组件,可以很方便地处理表格数据的增删改查操作。要实现表格动态添加插入删除列以及支持单元格编辑,你可以按照以下步骤操作: 1. 定义表格数据源 `data` 作为数组,每个元素代表一行数据,包含固定的列和可变的列信息。 ```javascript data() { return { tableData: [ {固有列1: '值1', 固定列2: '值2'}, {固有列1: '值3', 固定列2: '值4'} ], // 可变列定义 columns: [ {prop: '固定列1', label: '固定列1', fixed: 'left'}, // 左固定列 {prop: '固定列2', label: '固定列2'} // 不固定列 ] }; } ``` 2. 使用`columns`动态添加新列。例如,当你需要添加新的动态列时,可以在适当的时候追加到`columns`数组中。 ```javascript addColumn(newColumn) { this.columns.push(newColumn); this.$nextTick(() => { this.tableData.forEach(item => (item[newColumn.prop] = '')); // 初始化新列的值 }); }, ``` 3. 对于单元格的可编辑,可以利用`el-form`和`el-input`结合,给每个需要编辑的单元格加上一个`v-model`绑定。同时,当表头的`type`设置为`selection`时,可以配合`@row-click`事件监听点击,打开对应的编辑状态。 ```html <el-table-column type="selection" width="55"></el-table-column> <template v-for="(column, index) in columns"> <el-table-column :key="index" :prop="column.prop" :label="column.label"> <template slot-scope="scope"> <!-- 如果是可编辑单元格 --> <el-form-item :model="scope.row[column.prop]" v-if="isEditable(column)"> <el-input v-model="scope.row[column.prop]"></el-input> </el-form-item> <!-- 否则直接展示单元格内容 --> <span v-else>{{ scope.row[column.prop] }}</span> </template> </el-table-column> </template> <script> // 检查当前列是否允许编辑 function isEditable(column) { return column.editable !== false; } </script> ``` 4. 动态删除列时,你需要移除对应的数据源和列配置,更新视图。 ```javascript deleteColumn(index) { this.columns.splice(index, 1); // 移除列 this.tableData.forEach(item => delete item[this.columns[index].prop]); // 清删除列的数据 }, ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

十一猫咪爱养鱼

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值