2024年最全vue el-table实现行内编辑功能_el-table 行内编辑，大厂程序员35岁后的职业出路在哪

最后

好了，这就是整理的前端从入门到放弃的学习笔记，还有很多没有整理到，我也算是边学边去整理，后续还会慢慢完善，这些相信够你学一阵子了。

做程序员，做前端工程师，真的是一个学习就会有回报的职业，不看出身高低，不看学历强弱，只要你的技术达到应有的水准，就能够得到对应的回报。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

学习从来没有一蹴而就，都是持之以恒的，正所谓活到老学到老，真正懂得学习的人，才不会被这个时代的洪流所淘汰。

| 1 2 3 4 | <``el-table :data="propTableData.col.filter(data => handleAdd || data.name.toLowerCase().includes(handleAdd.toLowerCase()))" highlight-current-row border> </``el-table``> |

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``>

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

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

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

css

1，盒模型
2，如何实现一个最大的正方形
3，一行水平居中，多行居左
4，水平垂直居中
5，两栏布局，左边固定，右边自适应，左右不重叠
6，如何实现左右等高布局
7，画三角形
8，link @import导入css
9，BFC理解

js

1，判断 js 类型的方式
2，ES5 和 ES6 分别几种方式声明变量
3，闭包的概念？优缺点？
4，浅拷贝和深拷贝
5，数组去重的方法
6，DOM 事件有哪些阶段？谈谈对事件代理的理解
7，js 执行机制、事件循环
8，介绍下 promise.all
9，async 和 await,
10，ES6 的 class 和构造函数的区别
11，transform、translate、transition 分别是什么属性？CSS 中常用的实现动画方式,
12，介绍一下rAF(requestAnimationFrame)
13，javascript 的垃圾回收机制讲一下,
14，对前端性能优化有什么了解？一般都通过那几个方面去优化的？

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

mg-T9zPnkcW-1715042013971)]

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】