iview结合loading属性手动控制显示隐藏

<Modal
      v-model="modalVisible"
      :loading="modalLoading"
      @on-ok="onModalOk"
      @on-cancel="modalVisible = false"
    >
</Modal>

  onModalOk() {
    if (this.modalType === '模式一') {
      this.modalLoading = true // 确保弹出confirm时modal不消失
      this.$Modal.confirm({
        title: 'Confirm',
        content: '<p>Are you sure to submit change?</p>',
        onOk: () => {
          this.modalVisible = false // 若点击confirm的确定，modal消失
          this.submitEditFunction()
        },
        onCancel: () => {
          this.modalLoading = false // 若点击confirm的取消
          this.$nextTick(() => {
            this.modalLoading = true // modal不消失，且不出现loading小菊花
          })
        }
      })
    } else if (this.modalType === '模式二') {
      if (/*没通过某些校验*/) { // modal不消失，且不出现loading小菊花
        this.modalLoading = false
        this.$nextTick(() => {
          this.modalLoading = true
        })
        return
      }
      this.modalVisible = false
      this.submitAddFunction()
    }
  }

 

总结：

分别写了两种情况，一个是结合confirm框的，一个是立即校验的。两者没有逻辑联系，写两种就是为了对比，说明重点是以下代码。详细的原因的略，应该不难理解。

this.modalLoading = false
this.$nextTick(() => {
  this.modalLoading = true
)