问题描述

需求是：一个批量修改按钮，点击弹出一个弹窗，用户输入相应一条数据，点击确定，原来的 el-table 中的勾选数据进行部分属性的替换，但是该属性中存在有数组类型的数据，一旦批量修改的过多，就会导致页面有一段时间的卡顿，所以就想用户点击确定之后加上loading, 然后再修改数据进行页面渲染，让用户不要感受到卡顿。

但是-> 这个loading 不知道为啥就出不来

解决方案

利用 setTimeout 修改，代码如下：

handleSubmit() { // 确定按钮点击事件
    this.loading = this.$loading({
      lock: true,
      text: '批量操作中...',
      spinner: 'el-icon-loading',
      background: 'rgba(0, 0, 0, 0.7)',
    })
    this.$refs.Form.validate(async (valid: boolean) => {
      if (valid) {
        setTimeout(() => {
          const form = this.form
          const fromTarget = this.map[0]
          for (let i = 0; i < this.checked.length; i++) {
            let index = this.checked[i].$index
            form[index]['aList'] = cloneDeep(fromTarget['aList'])
            form[index]['bList'] = cloneDeep(fromTarget['bList'])
            form[index]['a'] = fromTarget['a']
            form[index]['b'] = fromTarget['b']
            form[index]['c'] = fromTarget['c']
          }
          this.dialogVisible = false
        }, 10)
      } else {
        this.loading.close()
        this.loading = null
        this.$message.warning(
          '表单校验未通过，请检查表格中必填信息是否全部填写'
        )
      }
    })
  }