当前位置：首页 > news >正文

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

news 2025/8/14 6:54:40

动态属性的响应式问题

通过点击给目标添加动态数据，该数据不具备响应式特性
如下图：
在这里插入图片描述

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

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

 <el-table-columnprop="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-popconfirmtitle="确定删除该角色吗？"><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('角色名和描述不能为空')}},// hideEditerhideEditer(row) {row.isEdit = falserow.backupRow.name = row.namerow.backupRow.description = row.descriptionrow.backupRow.state = row.state}