vue element 动态校验数据的必填项和非必填项

<template>
  <!-- 人员资料--我的群组--添加群组 -->
  <section class="add-group">
    <div class="content">
      <el-form
        class="add-form"
        label-position="right"
        label-width="100px"
        :model="groupForm"
        :rules="formRules"
        ref="groupForm"
      >
        <el-form-item prop="groupName" label="群组名称：">
          <el-input
            v-model.trim="groupForm.groupName"
            placeholder="请输入群组名称"
          ></el-input>
        </el-form-item>
        <el-form-item prop="name">
          <span slot="label">
            <span>群组成员：</span>
            <el-button size="small" type="primary" @click.native="addMembers">
              添加
            </el-button>
          </span>
          <el-input
            type="textarea"
            :rows="4"
            v-model.trim="groupForm.members"
            placeholder="请添加群组成员"
          ></el-input>
        </el-form-item>
        <el-form-item class="operate">
          <el-button size="small" type="default" @click.native="cancel">
            取消
          </el-button>
          <el-button size="small" type="primary" @click.native="submit">
            保存
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 添加群组成员 -->
    <el-dialog
      title="添加成员"
      :modal-append-to-body="true"
      :append-to-body="true"
      :visible.sync="addFormVisible"
    >
      <el-form
        :model="membersForm"
        :rules="membersRule"
        ref="membersForm"
        label-width="100px"
        class="add-form"
      >
        <el-form-item label="成员类型:" prop="type">
          <el-radio-group v-model="membersForm.type">
            <el-radio
              v-for="item in memberType"
              :key="item.value"
              :label="item.value"
            >
              {{ item.label }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- 选择用户时如果选择的是门户人员则成员名称是必填项，否则为非必填项 -->
        <!-- 动态校验数据的必填项和非必填项 -->
        <el-form-item
          label="成员名称:"
          prop="name"
          :message="'请选择成员名称'"
          :required="membersForm.type === STAFF_TYPE.PORTAL_USER? true:false">
          <el-input
            v-if="membersForm.type === STAFF_TYPE.PORTAL_USER"
            type="textarea"
            autosize
            @focus="showSelectStaff"
            placeholder="请选择(可多选)"
            key="select-name"
          >
          </el-input>
          <el-input
            v-else
            v-model="membersForm.name"
            type="textarea"
            autosize
            auto-complete="off"
            key="input-name"
            placeholder="请输入成员姓名，多个以&quot; , &quot;隔开"
          ></el-input>
        </el-form-item>
        <!-- 输入成员昵称 -->
        <el-form-item label="成员昵称" prop="nicknames">
          <el-input
            v-model="membersForm.nicknames"
            type="textarea"
            autosize
            auto-complete="off"
            placeholder="请输入成员昵称，多个以&quot; , &quot;隔开"
          ></el-input>
        </el-form-item>
         <!-- 输入成员手机号 -->
        <el-form-item label="成员手机号" prop="phone" v-if="membersForm.type === STAFF_TYPE.DIRECT_INPUT">
          <el-input
            v-model="membersForm.phone"
            maxlength="11"
            auto-complete="off"
            placeholder="请输入成员手机号，多个以&quot; , &quot;隔开"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="addFormVisible = false"
          >取 消</el-button
        >
        <el-button
          size="small"
          type="primary"
          @click="addSubmit"
          :loading="load.addLoading"
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <!-- 选择群组成员弹窗 -->
    <select-staff :showDialog="selectDialogVisible" @closeModal="closeModal"></select-staff>
  </section>
</template>
<script>
import DATA_TYPE from 'utils/enum';
import utilCheck from 'utils/check';
import selectStaff from 'components/selectStaff';

export default {
  components: {
    'select-staff': selectStaff
  },
  data() {
    return {
      load: {
        addLoading: false,
        treeLoading: false
      },
      // 群组信息
      groupForm: {
        groupName: '',
        members: ''
      },
      addFormVisible: false,
      // 成员信息
      membersForm: {
        type: DATA_TYPE.STAFF_TYPE.PORTAL_USER, // 默认为门户用户
        name: '',
        members: [],
        nicknames: '',
        phone: ''
      },
      // 用户类型
      STAFF_TYPE: DATA_TYPE.STAFF_TYPE,
      memberType: [
        { label: '门户用户', value: DATA_TYPE.STAFF_TYPE.PORTAL_USER },
        { label: '直接输入', value: DATA_TYPE.STAFF_TYPE.DIRECT_INPUT }
      ],
      selectDialogVisible: false,
      searchMember: '',
      selectedMembers: [],
      // 群组信息校验
      formRules: {
        name: [
          {
            required: true,
            message: '请输入群组名称',
            trigger: 'blur'
          }
        ],
        members: [
          {
            required: true,
            message: '请添加群组成员',
            trigger: 'blur'
          }
        ]
      },
      /**
       * 成员信息校验分为两种
       * 1.门户选择
       *    选择成员名称，成员昵称非必填，但是若填写，则数量上须保持一致
       * 2.直接输入
       *    成员手机号必填，成员名称和昵称非必填
       *    但是如果填写了，则必须和手机号数量保持一致
       *
      */
      membersRule: {
        name: [
          {
            trigger: 'blur',
            validator: (rule, value, callback) => {
              let err;
              // 门户成员时必须选择成员名称
              if (this.membersForm.type === this.STAFF_TYPE.PORTAL_USER && !value) {
                err = new Error('请选择成员名称');
              }
              callback(err);
            }
          }
        ],
        phone: [
          {
            required: true,
            message: '请输入成员手机号',
            trigger: 'blur'
          },
          // 校验多个手机号的格式是否都正确
          utilCheck.checkMultipleMobile
        ]
      },
      searchStaff: ''
    };
  },
  watch: {
    /**
     * 需要在监听这个属性 另外一定要加$nextTick()
     * 不加的话切换必选属性的时候会触发框架自带的验证会出现 XX is required
    */
    'membersForm.type': function (val) {
      this.$nextTick(() => {
        if (val !== 1) {
            this.$refs.membersForm.validateField('name');
            this.membersForm.name = '';
        }
    });
  }
  },
  methods: {
    showSelectStaff() {
      this.selectDialogVisible = true;
    },
    // 选择群组成员
    addMembers() {
      this.addFormVisible = true;
    },
    // 关闭选择群组成员弹窗
    closeModal() {
      this.selectDialogVisible = false;
    },
    // 提交添加群组成员
    addSubmit() {},
    submit() {
      this.$refs.groupForm.validate((valid) => {
        if (valid) {
          // TODO test
        }
      });
    },
    cancel() {
      this.$router.back();
    }
  },
  mounted() {}
};
</script>
<style lang="scss" scoped>
@import "~assets/css/vars.scss";
.add-group {
  overflow: hidden;
  .content {
    width: 50%;
    margin: 60px auto 0;
  }
  .operate {
    text-align: center;
    margin-top: 40px;
  }
}
.search-content {
  display: flex;
  .el-button {
    margin-left: 30px;
  }
}
.dialog-content {
  padding-bottom: 20px;
}
</style>