vue el-table实现行内编辑功能_el-table 行内编辑，一眼就能看懂的前端自学手册

本文链接：https://blog.youkuaiyun.com/2401_87288706/article/details/142503238

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


1 2 3 4	<``el-table `:data="propTableData.col.filter(data => handleAdd


1 2 3 4 5 6 7 8 9	<``template slot``=``"header" slot-scope``=``"scope"``> <``el-button v-model``=``"handleAdd" size``=``"mini" type``=``"success" `round` `plain` @``click``=``"handleAdd(scope.$index, scope.row)"``>{{ $t('common.add') }}</``el-button``> </``template``>

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

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


1 2 3 4 5 6 7 8 9 10 11 12	`let row = {` `code:` ''``, `maxValue:` ''``, `minValue:` ''``, `name:` ''``, `valueType:` 'String'``, `id:` ''``, `typeId:` ''``, `warning:` false``, `isSet:` `true` `}` this``.propTableData.col.push(row)

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

propTableData.sel 保存当前行数据：


1	this``.propTableData.sel = row

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

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


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

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 <``template slot-scope``=``"scope"``> <``el-button size``=``"mini" type``=``"primary" round plain v-if``=``"!scope.row.isSet" @``click``=``"valChange(scope.row,scope.$index,true)"``>{{ $t('common.edit') }}</``el-button``> <``el-button size``=``"mini" type``=``"primary" round plain v-else @``click``=``"valChange(scope.row,scope.$index,true)"``>{{ $t('common.save') }}</``el-button``> <``el-button size``=``"mini" type``=``"danger" round plain v-if``=``"!scope.row.isSet" @``click``=``"handleDelete(scope.$index, scope.row)"``>{{ $t('common.delete') }}</``el-button``> <``el-button size``=``"mini" type``=``"danger" round plain v-else @``click``=``"valChange(scope.row,scope.$index,false)"``>{{ $t('common.cancel') }}</``el-button``> </``template``>


1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26	<``template slot-scope``=``"scope"``> <``el-button size``=``"mini" type``=``"primary" `round` `plain` v-if``=``"!scope.row.isSet" @``click``=``"valChange(scope.row,scope.$index,true)"``>{{ $t('common.edit') }}</``el-button``> <``el-button size``=``"mini" type``=``"primary" `round` `plain` `v-else` @``click``=``"valChange(scope.row,scope.$index,true)"``>{{ $t('common.save') }}</``el-button``> <``el-button size``=``"mini" type``=``"danger" `round` `plain` v-if``=``"!scope.row.isSet" @``click``=``"handleDelete(scope.$index, scope.row)"``>{{ $t('common.delete') }}</``el-button``> <``el-button size``=``"mini" type``=``"danger" `round` `plain` `v-else` @``click``=``"valChange(scope.row,scope.$index,false)"``>{{ $t('common.cancel') }}</``el-button``> </``template``>

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

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

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

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

总结

我在成长过程中也是一路摸爬滚打，没有任何人的指点，所以走的很艰难。例如在大三的时候，如果有个学长可以阶段性的指点一二，如果有已经工作的师兄可以告诉我工作上需要什么，我应该前面的三年可以缩短一半；后来去面试bat，失败了有5、6次，每次也不知道具体是什么原因，都是靠面试回忆去猜测可能是哪方面的问题，回来学习和完善，当你真正去招人的时候，你就会知道面试记录是多么重要，面试官可以从面试记录里看到你的成长，总是去面试，总是没有成长，就会被定义为缺乏潜力。

可以从面试记录里看到你的成长，总是去面试，总是没有成长，就会被定义为缺乏潜力。