element form表單設置下拉選擇切換必填和非必填

參考鏈接：https://dsx2016.com/?p=529

<el-form-item label="發票類型" prop="billType">
                  <el-select v-model="applyData.billType" collapse-tags @change="changeType">
                    <el-option v-for="item in applyData.billTypeOption" :key="item.key" :label="item.val" :value="item.key" >
                    </el-option>
                  </el-select>
                </el-form-item>

<el-form-item label="開票電話" prop="invoicePhone" :required="isHaveTo">
                  <el-input v-model="applyData.invoicePhone" maxlength="20"></el-input>
                </el-form-item>

const isnvoicePhone = (rule, value, callback) => {
      // 當爲空值且爲必填時，拋出錯誤，反之通過校驗
      if (this.applyData.invoicePhone === '' && this.isHaveTo) {
        callback(new Error('請輸入開票電話'));
      } else {
        callback();
      }
    };

invoicePhone: [
          { validator: isInvoicePhone },
        ],

computed: {
    isHaveTo() {
      return this.applyData.billType === 0;
    },
  },

changeType() {
      // 重置數據
      this.applyData.invoicePhone = ''
      this.$nextTick(() => {
        // 移除校驗結果
        this.$refs.applyData.clearValidate();
      })
    },

在changeType時清除校驗，並通過isHaveTo來控制輸入框是否必填，並在自定義校驗中當是必填項並且爲空時返回錯誤信息