element-UI-----vue表单非空验证

三个注意点：el-form-item上设置prop属性

el-form上绑定rules

data里面写验证规则

最后在方法里面判断，如果为空就return

<el-dialog title="组织架构信息修改" :visible.sync="orgdialogFormVisible">
      <el-form :model="orge" :rules="rules" ref="orge">
        <el-form-item label="组织名称" :label-width="formLabelWidth" prop="name">
          <el-input v-model="orge.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="妇联主席" :label-width="formLabelWidth" prop="zx_username">
          <el-input v-model="orge.zx_username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="联系方式" :label-width="formLabelWidth" prop="zx_phone">
          <el-input v-model="orge.zx_phone" 
          autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="组织架构图" :label-width="formLabelWidth" prop="img_url">
          <el-upload
            accept="image/png, image/jpg, image/jpeg"
            v-model="orge.img_url" 
            :limit="1"
            :file-list="fileList"
            :show-file-list="true"
            :on-remove="handleRemove"
            :on-error="handleError"
            :on-success="handleSuccessOrg"
            :before-upload="beforeUpload"
            class="editor-slide-upload"
            :action="uploadAction"
            list-type="picture-card"
          >
            <div slot="tip">只能上传jpg/png/jpeg文件（文件名不允许出现中文）</div>
            <i class="el-icon-plus avatar-uploader-icon" />
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
          <el-button @click="orgdialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="confirm('orge')">确 定</el-button>
      </div>
    </el-dialog>



 data() {
    return {
        orge:{
        id:'',
        name:'',
        img_url: null,
        zx_username:'',
        zx_phone:''
      },
      rules:{
          name: [{ required: true, message: '请输入组织名称', trigger: 'blur' }],
          img_url: [{ required: true, message: '请选择组织架构图', trigger: 'change' }],
          zx_username: [{ required: true, message: '请输入妇联主席', trigger: 'blur' }],
          zx_phone: [{ required: true, message: '请输入联系方式', trigger: 'blur' }],
      },
  }
  methods: {
    confirm(orge){
      let b = false
      this.$refs[orge].validate((valid) => {
          if (valid) {
              b = true;
          }
      });
      if(!b){
          return
      }
      .......
    }
  }