vxe-table 导出时，如何添加进度显示

在Vue VxeTable组件中，导出数据时添加进度显示通常是在异步操作期间向用户反馈进度的一种常见做法。为了实现这个功能，你可以按照以下步骤操作：

1. **监听导出事件**：首先，你需要注册VxeTable提供的导出事件，例如`@export-end`，当导出完成时触发。

<template>
  <vxe-table @export-end="handleExportEnd"></vxe-table>
</template>

<script>
export default {
  methods: {
    handleExportEnd() {
      // 这里开始处理进度展示
    }
  }
}
</script>

2. **初始化进度变量**：在`handleExportEnd`内部，创建一个表示导出进度的状态变量，比如`progress`。

data() {
  return {
    progress: 0,
  };
},

3. **更新进度**：在导出过程中的某个阶段，比如每行数据处理完毕时，增加进度。这通常通过循环遍历导出的数据量，并在每次迭代后更新进度。

handleExportEnd(result) {
  let totalRows = result.total;
  const step = 100 / totalRows;

  for (let i = 0; i < totalRows; i++) {
    this.progress = i * step;
    // 如果你想实时更新视图，可以在这里使用v-model绑定到一个进度条元素上
    // `<div :style="{ width: `${this.progress}%` }">...</div>`
    // 或者使用Vue的nextTick确保在DOM更新后再更新进度显示
    this.$nextTick(() => {
      // 更新DOM或其他显示方法
    });
  }

  // 当导出完成后，进度为100%
  this.progress = 100;
}

4. **结束提示**：在导出结束后，清除进度或显示一个完成消息。

handleExportEnd() {
  this.progress = 0;
  // 显示导出完成的提示信息
}