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>