侧边栏壁纸
博主头像
前端学习

行动起来,活在当下

  • 累计撰写 307 篇文章
  • 累计创建 18 个标签
  • 累计收到 0 条评论

目 录CONTENT

文章目录

vue电商管理—修改用户信息点击确定时进行预验证

Administrator
2022-05-20 / 0 评论 / 0 点赞 / 88 阅读 / 0 字

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

0
Vue

评论区