作文生成器网站,芝罘区网,网站美工培训,防盗网站人做清洁动态属性的响应式问题
通过点击给目标添加动态数据#xff0c;该数据不具备响应式特性 如下图#xff1a;
点击编辑#xff0c;前面的数据框会变成输入框#xff0c;点取消会消失
// 获取数据
async getList () {const res await xxxthis.list res.data.rows// 1. 获…动态属性的响应式问题
通过点击给目标添加动态数据该数据不具备响应式特性 如下图
点击编辑前面的数据框会变成输入框点取消会消失
// 获取数据
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-columnpropnamelabel角色width200!-- 3. 页面渲染--template v-slot{row}el-input v-ifrow.isEdit v-modelrow.backupRow.name sizemini /span v-else{{ row.name }}/span/template/el-table-column行内编辑 因为编辑时点击取消会滚到之前的状态所以编辑的时的数据是临时的数据 获取数据后给每一条数据添加备份数据v-model绑定备份的数据点击编辑行 更新备份数据点击取消恢复原数据
template v-slot{row}template v-ifrow.isEditel-button sizemini typeprimary clickconfirmEdit(row)确定/el-buttonel-button sizemini clickhideEditer(row)取消/el-button/templatetemplate v-elseel-button typetext分配权限/el-buttonel-button typetext clickhandleEditBtn(row)编辑/el-buttonel-popconfirmtitle确定删除该角色吗el-button slotreference typetext stylemargin-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}
