逻辑
点击逻辑:
<span slot="action" slot-scope="text, record, index">
<a :disabled="record.username === 'admin'" @click="edit(record)">修改</a>
</span>
方法:
edit(record) {
this.modalTitle = "修改用户";
this.editFormData = { ...record };
this.visible = true;
// 将部门父ID和类型ID从字符串转换为整数,以便正确处理数字比较和显示
this.editFormData.deptPid = record.deptPid && parseInt(record.deptPid.key);
this.editFormData.deptTid = record.deptPid && parseInt(record.deptTid.key);
if (this.editFormData.deptTid || this.editFormData.deptTid === 0) {
this.changeSelect(this.editFormData.deptTid)
}
// 在DOM更新后,更新表单数据以确保编辑表单能正确显示当前数据
this.$nextTick(() => {
this.$refs.userForm.update(this.editFormData);
});
},
函数首先将模态框标题设置为"修改用户",然后将record
对象的属性值复制给editFormData
对象。接着,将record
对象中的deptPid
的key
值转换为整数,并赋值给editFormData.deptPid
和editFormData.deptTid
。如果editFormData.deptTid
存在或为0,则调用changeSelect
方法。最后,使用$nextTick
函数确保DOM更新后,调用update
方法更新表单数据。
then
后面的箭头函数会在Promise成功时执行,res
参数包含了成功时的响应数据。catch
后面的箭头函数会在Promise失败时执行,res
参数包含了失败的原因,通常是错误信息。