初学element组件库from和table需要知道的

145 阅读1分钟

form表单验证

image.png

在data里配置rules项     name这个对象为验证规则的名称 在prop属性上定义
rules: {
    name:[
  required必填项    { required: true, message: '用户名必填', trigger: 'blur' },
 
  pattern正则验证   { pattern: /^1[0-9]\d{4}$/, message: '密码不能是123456', trigger: 'blur' },
  
  最小(大)长度      { min: 6, max: 8, message: '长度为6-8位', trigger: 'blur' },
          
                   {
 通过这个方法可以自定义验证规则, value为输入框的输入的值  验证成功调用callback()  验证不成功
 在callback()里传入错误信息
                        validator: function(rule, value, callback) {
                                  if (value === '123456') {
                                    callback(new Error('不能为123456'))
                                  } else {
                                    callback()
                                   }

                            }

                     }
                   

清空验证失败提示的红色字体--->清空表单内容并不会清空红色字体


通过ref获取表单对象 调用resetFields方法
this.$refs.ruleForm.resetFields()

直接清空值是无效的
this.值=''   //无法清空验证失败红色字体

table

``

      <el-table-column width="180">
      <template slot-scope="scope">   自定义插槽  通过自定义插槽可以改变表格里的内容 

           {{scope.row}}
   
       </template>
       </el-table-column>

``