1、使用elementUI的dialog对话框,:visible.sync="editDialogVisible"是控制对话框的显示与隐藏

202108301630290825155031

2、给修改按钮添加点击事件showEditDialog

3、在method中编写showEditDialog方法,使editDialogVisible = true来让对话框显示

4、因为显示的对话框要展示对应用户的信息,所以我们需要用id来查询改用户,这时就需要用到作用域插槽

202108301630291231107544

5、使用axios获取数据

202108301630291594197348

因为获取到的数据是json,所以我们需要在data中定义一个对象来接受数据

202108301630291712353959

然后在表单中双向绑定这个数据
202108301630291888178631

6、添加输入框的验证规则,第一行是用户名,不可以修改,直接添加disabled属性

表单中要添加rules

202108301630292137202460

202108301630292229190775

需要添加规则的输入框需要添加prop属性,其中的值要与数据层的规则名相对应

202108301630292229190775-1653034248477

202108301630292304163427

7、表单提交时候的预验证

202108301630292377167431

202108301630292454332857