在vue中给 el-dialog添加遮罩层效果，请求后端接口开启遮罩层，请求完毕关闭遮罩，避免因数据渲染卡顿问题

为了实现在请求后端接口时开启遮罩层，并在请求完毕后关闭遮罩层的功能，我们需要借助 Vue 的生命周期函数和钩子函数来实现。具体实现步骤如下：

1. 在 `data` 中定义一个 `loading` 变量，用于控制遮罩层的显示和隐藏。

data() {
  return {
    loading: false, // 是否显示遮罩层
    // 其他数据...
  }
}

2. 在需要发送请求的方法中，先将 `loading` 变量设置为 `true`，即显示遮罩层，然后发送请求。

methods: {
  loadData() {
    this.loading = true; // 显示遮罩层
    axios.post('/api/data')
      .then(res => {
        // 处理请求结果
      })
      .catch(err => {
        // 处理请求错误
      })
      .finally(() => {
        this.loading = false; // 隐藏遮罩层
      })
  }
}

3. 在 `el-dialog` 上绑定 `:visible.sync` 属性，用于控制对话框的显示和隐藏，同时将 `:lock-scroll` 属性设置为 `true`，用于显示遮罩层。

<el-dialog :visible.sync="dialogVisible" :lock-scroll="true">
  <!-- 对话框内容 -->
</el-dialog>

4. 在 `mounted` 钩子函数中，监听 `loading` 变量的变化，根据变化来控制对话框和遮罩层的显示和隐藏。

mounted() {
  this.$watch('loading', (val) => {
    if (val) {
      this.dialogVisible = false; // 隐藏对话框
    } else {
      this.dialogVisible = true; // 显示对话框
    }
  })
}

这样，当执行 `loadData` 方法时，会先显示遮罩层，然后发送请求，请求完毕后再隐藏遮罩层，避免了因数据渲染卡顿问题。同时，由于监听了 `loading` 变量的变化，还可以在遮罩层显示的同时隐藏对话框，提高用户体验。