vue3 xlsx 导出excel 动态获取 el-table宽度

在 Vue 3 中，如果你想要在导出 Excel 文件时动态获取 el-table 的宽度，你可以通过以下步骤实现：

1. 安装必要的库

首先，确保你已经安装了处理 Excel 文件的库，例如 xlsx。如果还没有安装，可以通过 npm 安装它：

npm install xlsx

2. 获取 el-table 的宽度

你可以通过 Vue 的 ref 和 nextTick 方法来确保在渲染后获取正确的宽度。

3. 导出 Excel 文件

使用 xlsx 库将数据导出为 Excel 文件。

示例代码

下面是一个完整的示例，展示如何在使用 Element Plus 的 el-table 时动态获取其宽度并在导出时使用该宽度：

<template>
  <el-table ref="tableRef" :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="日期" width="180"></el-table-column>
    <el-table-column prop="name" label="姓名" width="180"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
  </el-table>
  <el-button @click="exportExcel">导出 Excel</el-button>
</template>
 
<script setup>
import { ref, nextTick } from 'vue';
import * as XLSX from 'xlsx';
 
const tableRef = ref(null);
const tableData = ref([
  { date: '2023-04-01', name: '张三', address: '上海市浦东新区' },
  { date: '2023-04-02', name: '李四', address: '北京市海淀区' }
]);
 
const exportExcel = async () => {
  await nextTick(); // 确保 DOM 更新完成
  const tableElement = tableRef.value.$el.querySelector('.el-table__body-wrapper > table');
  const tableWidth = tableElement.offsetWidth; // 获取表格宽度
  const ws = XLSX.utils.table_to_sheet(tableElement, { sheet: "Sheet1", display: true }); // 将表格转换为工作表
  const wb = XLSX.utils.book_new(); // 创建新的工作簿
  XLSX.utils.book_append_sheet(wb, ws, "Data"); // 将工作表添加到工作簿中
  XLSX.writeFile(wb, "table.xlsx"); // 将工作簿保存为文件
};
</script>

说明：

1. 获取 el-table 的宽度：使用 nextTick 确保 DOM 更新完成，然后通过 querySelector 获取表格的 DOM 元素，并获取其宽度。

2. 导出 Excel：使用 xlsx 库的 table_to_sheet 方法将表格转换为工作表，然后保存为 Excel 文件。

这样，你就可以在导出 Excel 文件时动态获取并使用 el-table 的宽度了。