运城小程序开发公司_东莞保安招聘网_2024年重启核酸_b站推广网站入口

效果图展示

当在表格中点击编辑按钮时：点击的行变成文本框且数据回显可以点击确定按钮修改数据或者取消修改回退数据：

具体实现步骤

1. 行数据定义编辑标记

行数据定义编辑标记

当在组件中获取到用于表格展示数据的方法中，针对每一行数据添加一个编辑标记

this.list.forEach(item => {// item.isEdit = false // 添加一个属性 初始值为false// 数据响应式的问题  数据变化 视图更新// 添加的动态属性 不具备响应式特点// this.$set(目标对象, 属性名称, 初始值) 可以针对目标对象 添加的属性 添加响应式this.$set(item, 'isEdit', false)})

注意：为什么不使用item.isEdit = false , 因为动态添加的属性不具备响应式的特点，如果想要具备响应式，可以使用$set

2. 点击行编辑标记状态(isEdit)

点击编辑时，将当前行的标记isEdit设置为true

<el-table-column align="center" label=&