动态属性的响应式问题
通过点击给目标添加动态数据,该数据不具备响应式特性
如下图:
点击编辑,前面的数据框会变成输入框,点取消会消失
// 获取数据
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 // 改变行编辑状态
}
<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>
行内编辑
因为编辑时,点击取消会滚到之前的状态,所以编辑的时的数据是临时的数据
- 获取数据后,给每一条数据添加备份数据
- v-model绑定备份的数据
- 点击编辑行 更新备份数据
- 点击取消,恢复原数据
<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>
// 确定修改角色
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
}