element-ui资料

官网地址

常用组件

1.Select 选择器

当选项过多时，使用下拉菜单展示并选择内容。

<el-select v-model="selectValue" placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>

options是下拉选中所有备选项，备选项的标签名是label，对应的数据是value。
选中的数据是selectValue
编辑时，存入v-model数据selectValue里的是:value的数据，选中的数据结构是个数组。如果是多选的情况，选中的数据就会组成一个含多个元素的数组。
回显时，v-model的数据selectValue是由:label的数据组成的，只有由:label组成的数据组成，回显时才是label数据。
比如options：

options: [{
          value: '10',
          label: '汉语'
        }, {
          value: '20',
          label: '英语'
        }, {
          value: '30',
          label: '日语'
        }],

点击英语，此时selectValue=[‘20’]；回显时要求selectValue=[‘英语’]，而不是selectValue=[‘20’]
实际开发
如果select选择器既要新增数据，又要修改编辑，此时:value和:label都要采用:label后的值，这样选中的值就是label组成的数组，回显后再次编辑保存也是label组成的数组。可以统一处理。
如果后端需要:value值，可以对options进行循环过滤。
示例：

<el-select ref="tagList" clearable v-model= "tagList"
             placeholder='请选择标签'
             @change="validTag()">
      <el-option v-for='(item, index) in allTagList'
                 :key="index + '1'"
                 :label='item.value'
                 :value='item.value'
      ></el-option>
  </el-select>


 // 转换标签结构
 let tagArr = [];
 // console.log("选中的", this.tagList);
 if (this.tagList.length > 0) {
     this.allTagList.forEach(item => {
         if (this.tagList.indexOf(item.value) > -1) {
             let tagList = {
                 tagName: item.value,
                 tagCode: item.code
             };
             tagArr.push(tagList);
         }
     });
 }
 this.form.tagList = tagArr;

校验

参考资料

rule详细说明、官方校验器、自定义校验规则

rule组成

rule项，即规则数组的元素。这里先就上述rules的各元素项解析一下：
required：表示是否必须有值，取值为true/false，如为true，表示必须有值，如果无值，则校验不通过；如为false，则允许无值，但在有值的情况下，不影响其它规则的使用。
message：提示消息，在校验不通过时提示此消息。
trigger：触发方式，取值为blur/change，blue表示失去焦点，一般在input组件中使用；change为值改变，一般在选择框中使用。
min：字符串最小长度。
max：字符串最大长度。

自定义校验规则

定义校验规则
入参通常为三个值：rule, value, callback
callback用于返回校验结果，其中callback(new Error(‘内容’));中的“内容”会作为警告提示信息。
定义校验：

let validCertificateDate = (rule, value, callback) =>{
                    console.log("value:", value);
                    if(value == undefined || value == 'Invalid date'){
                        callback(new Error('证书有效期不能为空'));
                    }
                    callback();
                };

使用：

this.rules.certificateDate = [
    {validator: validCertificateDate, required: true, trigger: 'blur'}
];

动态修改校验规则

对组件进行校验时，可以动态修改校验规则。

// 表单
 <el-form :model="form" :rules="rules" ref="form" inline-message>
 </el-form>

 // 默认校验规则
  rules: {
              title: [
                  {required: true, message: '标题不可为空', trigger: 'blur'},
              ],
              tagList: [
                  {required: true, message: '请选择标签', trigger: 'change'},
              ],
          },
 // 动态修改：将tagList的校验规则置空
  this.$set(this.rules, "tagList", "");

下拉菜单的校验规则

如果只是使用最简单的下拉菜单，下拉菜单与其他表单输入项不联动，直接在rule里面设置即可。

type:[
      {required: true, message: '类型不能为空', trigger: 'blur'}
 ]

一旦下拉菜单手其他用户输入项的影响，此时校验非常容易出错，此时不再使用rule校验，而是提交表单时自定义校验

if(this.type){
    this.$message({type: 'warning', message: "请选择类型!"});
    return false;
  }

element-ui表单中关于校验的属性

在标签内加上required属性绑定并且设置值布尔值为true即可。

<el-form-item label="用户名" label-width="70px" :required="true">
       <el-input v-model="form.name" autocomplete="off">
       </el-input>
</el-form-item>