自定义校验手机号和邮箱

  1. data() {
  2.     // 定义自定义校验规则
  3.     // 校验邮箱
  4.     // rules，value，cb：分别为校验规则，校验参数，回调函数
  5.     var checkEmail = (rules,value,cb) => {
  6.       const regEmail = /^([a-zA-Z0-9])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/
  7.       if(regEmail.test(value)){
  8.         // 合法邮箱
  9.         return cb();
  10.       }
  11.       cb(new Error('请输入合法邮箱！'))
  12.     };
  13.     // 校验手机号
  14.     var checkMobile = (rules,value,cb) => {
  15.       let reg = /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/
  16.       if (reg.test(value)) {
  17.         return cb()
  18.       } else {
  19.       cb(new Error('手机号码格式不正确'))
  20.       }
  21.     }
  22.     return {
  23.       // 获取用户列表的参数
  24.       queryInfo: {
  25.         query: '',
  26.         // 当前的页数
  27.         pagenum: 1,
  28.         // 当前每页显示多少条数据
  29.         pagesize: 2,
  30.       },
  31.       userlist: [],
  32.       total: 0,
  33.       // 控制添加用户对话框的显示和隐藏
  34.       addDialogVisible: false,
  35.       // 添加用户数据对象
  36.       addForm:{
  37.         username:'',
  38.         password:'',
  39.         email:'',
  40.         mobile:''
  41.       },
  43.       // 表单验证规则
  44.       addFormRules:{
  45.         // 普通校验规则
  46.         username: [
  47.           { required: true, message: '请输入用户名', trigger: 'blur' },
  48.           { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
  49.         ],
  50.         password: [
  51.           { required: true, message: '请输入密码', trigger: 'blur' },
  52.           { min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' }
  53.         ],
  54.         email: [
  55.           { required: true, message: '请输入邮箱', trigger: 'blur' },
  56.           // { min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' },
  57.           {validator:checkEmail,trigger: 'blur'}
  58.         ],
  59.         mobile: [
  60.           { required: true, message: '请输入手机号', trigger: 'blur' },
  61.           // { min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' }
  62.           {validator:checkMobile,trigger: 'blur'}
  63.         ],
  64.       }
  65.     }
  66.   },

重置表单内容

  1. // 找到表单，调用resetFields()函数
  2. this.$refs.addFormRef.resetFields();

表单预校验

  1. this.$refs.addFormRef.validate(valid => {
  2.   if(!valid) {
  3.     //如果校验失败，
  4.     return 
  5.   }
  6.   // 校验成功，就发起添加用户的网络请求
  7. });

通过作用域插槽接收数据

  1. //通过插槽可以获取到当前这一行的数据，存放在scope中
  2. //scope.row获取到这一行的信息
  3. <template slot-scope="scope">
  4.   <el-row>
  5.     <el-button
  6.       type="primary"
  7.       icon="el-icon-edit"
  8.       size="mini"
  9.       @click="showEditDialog(scope.row.id)"
  10.     ></el-button>
  11. </template>

对话框

:visible.sync=”distribuVisible” 表示当前对话框是否显示
:before-close=”handleClose” 表示在关闭对话框之前的动作

  1. <!-- 分配角色对话框 -->
  2.     <el-dialog
  3.       title="分配角色"
  4.       :visible.sync="distribuVisible"
  5.       width="30%"
  6.       :before-close="handleClose">
  7.       <span>这是一段信息</span>
  8.       <span slot="footer" class="dialog-footer">
  9.         <el-button @click="dialogVisible = false">取 消</el-button>
  10.         <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  11.       </span>
  12.     </el-dialog>