动态属性的响应式问题和行内编辑的问题

动态属性的响应式问题

通过点击给目标添加动态数据，该数据不具备响应式特性
如下图：

点击编辑，前面的数据框会变成输入框，点取消会消失

// 获取数据
async getList () {
	const res = await xxx
	this.list = res.data.rows
	// 1. 获取数据后针对每个数据定义标识 使用 $set
	this.list.forEach(item => {
		// 数据响应式问题：数据变化，视图不变
		// 因为添加的动态数据，不具备响应式特性
		// item.isEdit = false
		// this.$set(目标对象, 属性名称, 初始值) 可以针对目标对象 添加属性 添加响应式
		this.$set(item, 'isEdit', false)
	})
}

// 点击编辑
hancleEditBtn(row) {
	// 2. 点击行编辑标记状态改变
	row.isEdit = true // 改变行编辑状态
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

 <el-table-column
          prop="name"
          label="角色"
          width="200"
        >
        <!-- 3. 页面渲染-->
          <template v-slot="{row}">
            <el-input v-if="row.isEdit" v-model="row.backupRow.name" size="mini" />
            <span v-else>{{ row.name }}</span>
          </template>
        </el-table-column>
1
2
3
4
5
6
7
8
9
10
11

行内编辑

因为编辑时，点击取消会滚到之前的状态，所以编辑的时的数据是临时的数据

1. 获取数据后，给每一条数据添加备份数据
2. v-model绑定备份的数据
3. 点击编辑行 更新备份数据
4. 点击取消，恢复原数据

<template v-slot="{row}">
	<template v-if="row.isEdit">
		<el-button size="mini" type="primary" @click="confirmEdit(row)">确定</el-button>
		<el-button size="mini" @click="hideEditer(row)">取消</el-button>
	</template>
	<template v-else>
		<el-button type="text">分配权限</el-button>
		<el-button type="text" @click="handleEditBtn(row)">编辑</el-button>
		<el-popconfirm
		title="确定删除该角色吗？"
		>
			<el-button slot="reference" type="text" style="margin-left: 10px;">删除</el-button>
		</el-popconfirm>
	</template>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

// 确定修改角色
    async confirmEdit(row) {
      if (row.backupRow.name && row.backupRow.description) {
        const res = await updateRole({ ...row.backupRow, id: row.id })
        if (!res.success) {
          this.$message.error(res.message)
        } else {
          this.$message.success('修改角色成功')
          // 退出编辑，浅拷贝，不用再次发请求角色列表数据
          /**
           * 将 { ...row.backupRow, isEdit: false } 中的所有属性复制到 row 对象中。
           * 如果 row 对象已经有与 row.backupRow 或 { isEdit: false } 中相同的属性，
           * 那么这些属性在 row 中的值会被新的值覆盖
           */
          Object.assign(row, {
            ...row.backupRow,
            isEdit: false
          })
        }
      } else {
        this.$message.error('角色名和描述不能为空')
      }
    },
    // hideEditer
    hideEditer(row) {
      row.isEdit = false
      row.backupRow.name = row.name
      row.backupRow.description = row.description
      row.backupRow.state = row.state
    }
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
27
28
29
30