vue el-table实现行内编辑功能

2023-08-04 16:33:05 264

最近做一个vue前后端分离的项目，前端框架用elementui，在使用el-table的过程中，需要实现行内编辑，效果大概是这样：

分为下面几个步骤：

（1）自定义el-table的表头（即添加“新增”按钮）：

handleAdd||data.name.toLowerCase().includes(handleAdd.toLowerCase()))"
highlight-current-row
border>


{{$t('common.add')}}

表头自定义了一个“添加”按钮，点击el-table动态添加一行。

（2）el-table动态添加一行：

letrow={
code:'',
maxValue:'',
minValue:'',
name:'',
valueType:'String',
id:'',
typeId:'',
warning:false,
isSet:true
}
this.propTableData.col.push(row)

vue数据变化驱动dom进行更新，给table绑定的数据propTableData.col添加一个元素，则表格会添加一行。

propTableData.sel保存当前行数据：

this.propTableData.sel=row

（3）el-table动态删除一行：

子组件中触发父组件的delete事件：

this.$emit('delete',row.id)

（4）当前行状态判断，即是否处于编辑状态，控制表格每一行的按钮元素的移除与插入：


{{$t('common.edit')}}
{{$t('common.save')}}
{{$t('common.delete')}}
{{$t('common.cancel')}}

上面代码中，通过v-if=“scope.row.isSet”来判断当前行是否处于编辑状态。

如果当前行处于编辑状态，则按钮为“保存”和“取消”，此时可对当前行进行保存和取消操作，且不能新增，除非先保存当前行；

如果当前行处于非编辑状态，则按钮为“编辑”和“删除”状态，此时可对当前行进行编辑和删除操作。

这样，就可以实现el-table行内编辑的需求。

完整版代码如下：








{{scope.row.name}}







{{scope.row.minValue}}







{{scope.row.maxValue}}









{{scope.row.valueType}}









{{scope.row.warning===true?'是':'否'}}




{{$t('common.add')}}


{{$t('common.edit')}}
{{$t('common.save')}}
{{$t('common.delete')}}
{{$t('common.cancel')}}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

vue el-table实现行内编辑功能

热门推荐

随机推荐