iview的modal中的form驗證出錯，頁面不關閉的方法

效果如下： 

 

代碼如下： 

<Modal
        v-model="configModal"
        :title="configTitle"
        :mask-closable="false"
        :styles="{ width: '500px'}"
        class-name="vertical-center-modal"
    >
      <div style="height: 100%;">
        <Form
            :label-width="100"
            inline
            :model="configForm"
            :rules="ruleValidate"
            ref="configForm"
        >
          <Row>
            <Form-item label="城市"  class="label">
            <Select
                    v-model="configForm.CityID"
                    filterable
                    v-select-text
                    placeholder="請選擇城市"
                    style="width:300px;"
                    transfer
                    :disabled="basic.city.length == 1"
            >
              <Option :value="0">全國</Option>
              <Option
                      v-for="(item, index) in cityList"
                      :value="item.id"
                      :key="index"
              >{{ item.name }}</Option>
            </Select>
          </Form-item>
          </Row>
          <Row class="configRow">
            <Form-item label="敏感詞內容" prop="Word" class="label">
              <Input v-model="configForm.Word" placeholder="請輸入敏感詞內容(10字之內)" style="width: 300px;" />
            </Form-item>
          </Row>
          <Row class="configRow">
            <Form-item label="敏感詞狀態" class="label">
              <i-switch v-model="configForm.State"></i-switch>
            </Form-item>
          </Row>
          <Row class="configRow">
            <Form-item label="客戶端類型" class="label">
                <Select v-model="configForm.ClientType" style="width: 300px;">
                  <Option :value="0">用戶</Option>
                  <Option :value="1">商戶</Option>
                  <Option :value="2">跑男</Option>
                </Select>
            </Form-item>
          </Row>
          <Row class="configRow">
            <Form-item label="提示彈窗標題" prop="TipTitle" class="label">
              <Input v-model="configForm.TipTitle" placeholder="請輸入彈窗標題(8字之內)" style="width: 300px;" />
            </Form-item>
          </Row>
          <Row class="configRow">
            <Form-item label="提示彈窗內容" prop="TipContent" class="label">
              <Input v-model="configForm.TipContent" type="textarea" :rows="4" placeholder="請輸入彈窗內容,建議30字之內" style="width: 300px;" />
            </Form-item>
          </Row>
        </Form>
      </div>
      // 下邊這個很重要，必須要重寫
      <div class="clear" slot="footer">
        <Button-group class="fr">
          <Button type="primary" @click="cancelConfig">取消</Button>
          <Button @click="saveConfig">確認</Button>
        </Button-group>
      </div>
    </Modal>

方法如下：

// 保存配置
      saveConfig(){
        this.$refs.configForm.validate(validate => {
          console.log("validate",validate)
          if (validate) {
            this.$post("/api/newcity/Dic/SensitiveWords/SaveData", {
              ...this.configForm,
              State: this.configForm.State == true ? 1 : 0
            })
              .then(res => {
                if (res.Success) {
                  this.$Message.success('保存成功');
                  this.configModal = false
                  setTimeout(() => {
                    this.sureSearch()
                  }, 1000)
                } else {
                  this.$Message.error(res.Message);
                }
              })
              .catch(error => {
                this.configModal = false
                console.log(error);
              });
          }else {
            this.$Message.warning('請填寫正確的信息');
          }
        })
      },