vue2+element-ui实现多行行内表格编辑

效果图展示

当在表格中点击编辑按钮时：

点击的行变成文本框且数据回显可以点击确定按钮修改数据大概取消修改回退数据：

 具体实现步调

1. 行数据定义编辑标志

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

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

复制代码

 留意：为什么不利用item.isEdit = false , 因为动态添加的属性不具备响应式的特点，如果想要具备响应式，可以利用$set
2. 点击行编辑标志状态(isEdit)

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

1. <el-table-column align="center" label="操作">
2.     <template>
3.         <!-- 非编辑状态 -->
4.         <el-button size="mini" type="text">分配权限</el-button>
5.         <el-button size="mini" type="text" @click="btnEditRow(row)">编辑</el-button>
6.         <el-button size="mini" type="text">删除</el-button>
7.     </template>
8. </el-table-column>

复制代码

点击编辑的方法

1. // 点击编辑行
2. btnEditRow(row) {
3.   row.isEdit = true // 改变行的编辑状态
4. }

复制代码

3. 插槽根据标志渲染表单

在el-table-column组件中利用<template v-slot="{ row }">作用域插槽获取当前行的信息
所以在表格列中可以借助当前行的信息根据当前的isEdit标志-渲染结构

1. <el-table-column prop="name" align="center" width="200" label="角色">
2.       <template v-slot="{ row }">
3.         <!-- 条件判断 -->
4.         <el-input v-if="row.isEdit" size="mini" />
5.         <span v-else>{{ row.name }}</span>
6.       </template>
7. </el-table-column>
8. <el-table-column prop="state" align="center" width="200" label="启用">
9.           <!-- 自定义列结构 -->
10.     <template v-slot="{ row }">
11.         <el-switch v-if="row.isEdit" />
12.         <span v-else>  {{ row.state === 1 ? "已启用" : row.state === 0 ? "未启用" : "无" }} </span>
13.     </template>
14. </el-table-column>

复制代码

$set的应用

• this.$set(目标对象, 属性名称, 初始值 )
  
• 等价于 Vue.set(目标对象, 属性名称, 初始值)
  
• 向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。
  

行内编辑-数据缓存

行内编辑必要做数据缓存
为什么要做数据缓存？
因为编辑时，可以取消会滚到之前的状态，所以编辑时的数据是临时的数据。
假设list数组中的name,state,description三个属性是用于表格每列展示的数据，当进行行内编辑时必要将这3个属性进行缓存，因为编辑的数据是临时的

如图，editRow的数据是针对当前行的数据做了一份拷贝，针对这个拷贝，我们可以随意修改。
1. 初始化时缓存数据

1. //缓存数据
2. this.list.forEach(item => {
3.         this.$set(item, 'isEdit', false)
4.         this.$set(item, 'editRow', {
5.           name: item.name,
6.           state: item.state,
7.           description: item.description
8.         })
9.   })

复制代码

2. 点击编辑时更新缓存数据

1. btnEditRow(row) {
2.       row.isEdit = true // 改变行的编辑状态
3.       // 更新缓存数据
4.       row.editRow.name = row.name
5.       row.editRow.state = row.state
6.       row.editRow.description = row.description
7. }

复制代码

3. 将编辑时的表单双向绑定缓存数据

1. <el-table-column prop="name" align="center" width="200" label="角色">
2.           <template v-slot="{ row }">
3.             <!-- 条件判断 -->
4.             <!-- 编辑状态 -->
5.             <el-input v-if="row.isEdit" v-model="row.editRow.name" size="mini" />
6.             <!-- 非编辑状态 -->
7.             <span v-else>{{ row.name }}</span>
8.           </template>
9. </el-table-column>

复制代码

行内编辑-确定取消按钮

1. 确定按钮

el-table中不能利用表单所以在确定按钮的回调中要进行手动判断
然后将编辑好的数据封装到一个对象中发起请求
下方利用Object.assign方法是因为发送完请求，数据库数据已更新，而前端页面也必要更新

1. <el-button type="primary" size="mini" @click="btnEditOK(row)">确定</el-button>
3. // 点击确定时触发
4.     async  btnEditOK(row) {
5.       if (row.editRow.name && row.editRow.description) {
6.         // 下一步操作
7.         await updateRole({ ...row.editRow, id: row.id })
8.         // 更新成功
9.         this.$message.success('更新角色成功')
10.         // 更新显示数据  退出编辑状态
11.         // row.name = row.editRow.name // eslint的一校验 误判
12.         // Object.assign(target, source)
13.         Object.assign(row, {
14.           ...row.editRow,
15.           isEdit: false // 退出编辑模式
16.         }) // 规避eslint的误判
17.       } else {
18.         this.$message.warning('角色和描述不能为空')
19.       }
20.     }

复制代码

留意： 这里既然更新成功了，要把缓存数据回显到页面上，并且关闭编辑模式
2. 取消按钮

关闭编辑状态即可

1. <el-button size="mini" @click="row.isEdit = false">取消</el-button>

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。