el-table按需导出
时间: 2023-07-03 14:18:56 浏览: 99
要实现 el-table 的按需导出,可以按照以下步骤进行:
1. 将需要导出的数据存放在一个数组中,并将该数组作为 el-table 的 data 属性绑定。
2. 在 el-table 中添加一个 slot="header" 的表头插槽,并在该插槽中添加一个导出按钮。
3. 在导出按钮的点击事件中,使用 FileSaver.js 库将数据导出为 Excel 文件。
以下是一个示例代码:
```html
<template>
<div>
<el-table :data="tableData">
<!-- 表头插槽 -->
<template slot="header">
<el-button type="primary" @click="exportTable">导出</el-button>
</template>
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
</el-table>
</div>
</template>
<script>
import { saveAs } from 'file-saver';
export default {
data() {
return {
tableData: [
{ name: '张三', age: 18, address: '北京市' },
{ name: '李四', age: 20, address: '上海市' },
{ name: '王五', age: 22, address: '广州市' }
]
};
},
methods: {
// 导出表格
exportTable() {
// 导出的文件名
const fileName = '表格数据.xlsx';
// 表头数据
const header = ['姓名', '年龄', '地址'];
// 表格数据
const data = this.tableData.map(item => [item.name, item.age, item.address]);
// 创建一个 Workbook 对象
const wb = XLSX.utils.book_new();
// 创建一个 Worksheet 对象
const ws = XLSX.utils.aoa_to_sheet([header, ...data]);
// 将 Worksheet 添加到 Workbook
XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
// 将 Workbook 导出为 Excel 文件
const wbout = XLSX.write(wb, { bookType: 'xlsx', type: 'binary' });
const blob = new Blob([s2ab(wbout)], { type: 'application/octet-stream' });
saveAs(blob, fileName);
}
}
};
// 字符串转 ArrayBuffer
function s2ab(s) {
const buf = new ArrayBuffer(s.length);
const view = new Uint8Array(buf);
for (let i = 0; i < s.length; i++) {
view[i] = s.charCodeAt(i) & 0xff;
}
return buf;
}
</script>
```
在上述代码中,我们使用了 XLSX.js 库将数据导出为 Excel 文件。在导出按钮的点击事件中,我们首先定义了导出的文件名、表头数据和表格数据,然后创建了一个 Workbook 对象和一个 Worksheet 对象,并将 Worksheet 添加到 Workbook 中。最后,我们将 Workbook 导出为二进制数据,并使用 FileSaver.js 库将其保存为 Excel 文件。
阅读全文