vxe-table 3.6.9 导出树形表格序号问题:type="seq" 导出后显示为 -1 的解决方法
<p>```html
<template></p>
<div>
<vxe-table ref="treeTable" :data="dataList" :columns="columns"></vxe-table>
<button @click="exportToExcel">导出 Excel</button>
</div>
</template>
<script>
import XLSX from "xlsx";
import VXEtable from "vxe-table";
import "vxe-table/lib/style.css";
export default {
data() {
return {
dataList: [
{ id: 1, name: "节点1", children: [{ id: 11, name: "子节点1" }] },
{ id: 2, name: "节点2", children: [{ id: 21, name: "子节点2" }] },
],
columns: [
{ field: "id", title: "序号", type: "seq" },
{ field: "name", title: "名称" },
],
};
},
methods: {
exportToExcel() {
const tableData = this.$refs.treeTable.getTableData();
const sheet = XLSX.utils.json_to_sheet(tableData);
const workbook = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(workbook, sheet, "Sheet1");
XLSX.writeFile(workbook, "export.xlsx");
},
},
mounted() {
VXEtable.install(this.Vue);
this.Vue.use(VXEtable);
},
};
</script>
<p>```</p>
<p>在以上代码中,使用<code>vxe-table</code>的<code>getTableData</code>方法获取表格数据,然后使用<code>xlsx</code>库将数据转换为Excel文件并下载。请确保已安装<code>vxe-table</code>和<code>xlsx</code>库,并且在<code>mounted</code>钩子函数中正确引入和安装<code>vxe-table</code>库。</p>
原文地址: https://www.cveoy.top/t/topic/pza1 著作权归作者所有。请勿转载和采集!