【elementUI】---添加用户功能实现

1.首先要点击 添加用户 按钮，弹出 添加用户 的对话框。这个对话框会用到 element 中 Dialog 对话框组件。 所以接下来要看一下 Dialog 对话框怎么使用。

2.在 element.js 的文件中，按需导入 Dialog 组件。 import { Dialog } from ‘element-ui’ 然后进行一下全局的注册 Vue.use(Dialog)

3. 把elementUI 中的 Dialog 对话框的最基本的 UI 结构，给粘到项目中。

:visible.sync="dialogVisible" 属性绑定用来控制对话框的显示和隐藏，我们需要把它绑定到布尔值身上。

：before-close=”handleClose“  这是一个事件叫 before-close ，在对话框关闭之前会触发这个事件，但是呢我们目前不需要它，就暂时先删掉

第一个span是内容主体区域

第二个span 是底部按钮确定和取消区域

扫描二维码关注公众号，回复： 13758638 查看本文章

 4.我么可以定义这个布尔值叫 addDialogVisible 。 现在呢这个布尔值并没有定义，找到所在组件的 script 行为区的 data(){} 中，定义 addDialogVisible：false， 默认为false 代表隐藏对话框

width=”50%“  控制对话框的宽度为屏幕的50% 一般都是50%的宽度

 

 5.当点击取消按钮绑定一个点击事件，<el-button @click="addDialogVisible = false">取消</el-button>只要触发点击事件我们就会触发事件 addDialogVisible：false 隐藏对话框，

同理点击确定也是一样效果隐藏对话框<el-button @click="addDialogVisible = false">确定</el-button>

6.点击添加用户的按钮时候，只需要给添加用户绑定一个点击事件，使得  addDialogVisible重置为true

即 对话框 不隐藏即可。

 

 7.input里的v-model 指令，绑定到了一个表单的数据项身上，addForm的username 身上

密码邮箱手机同理

 

 required:true  必填选项 

trigger：‘blur’ 失去焦点触发时机

 接下来接我主页另一篇文章

【el-elementUI】表单禁用、验证规则、修改表单重置和提交验证

【el-elementUI】表单禁用、验证规则、修改表单重置和提交验证_studyer网的博客-CSDN博客