树形表格是项目中常见的一种展示方式，而vue是目前前端最常用的框架之一。那么，如何在vue中实现原样导出树形表格呢？下面我将介绍一种实现方法。
方法
首先，我们需要安装 xlsx 库，该库能够将数据导出为Excel表格。在命令行中输入以下命令即可安装：
npm install xlsx --save
接着，我们需要封装一个函数来生成Excel文件：
import XLSX from 'xlsx'
export function exportTreeExcel(dataList, columns, fileName) {
const ws = XLSX.utils.json_to_sheet(getExportData(dataList, columns)) // 将数据转换成excel需要的一个二维数组形式
const wb = XLSX.utils.book_new()
XLSX.utils.book_append_sheet(wb, ws, 'Sheet1')
XLSX.writeFile(wb, `${fileName}.xlsx`)
}
// 数据整理，将树型数据扁平化，去掉树形结构，同时处理成需要导出的字段
function getExportData(dataList, columns) {
const res = []
dataList.forEach(item => {
const tmp = {}
columns.forEach(col => {
tmp[col.label] = item[col.prop]
})
res.push(tmp)
if (item.children && item.children.length) { // 如果有子节点，则递归处理
res.push(...getExportData(item.children, columns))
}
})
return res
}这段代码中，我们封装了一个函数 exportTreeExcel，它接受三个参数，分别是要导出的数据、列信息和导出文件的名称。在此函数中，我们首先通过调用 getExportData 函数将树形数据扁平化，并提取出需要导出的字段。然后，我们利用 XLSX 库将数据转换成 Excel 的格式，并通过 writeFile 方法将数据写入到文件中。
立即学习“前端免费学习笔记（深入）”；
getExportData 函数用于将树形数据扁平化处理，并提取出需要导出的字段。在此函数中，我们判断当前节点是否存在子节点，如果有，则递归处理其子节点，并将子节点的数据加入到结果数组中。
最后，我们在需要导出树形表格的地方调用 exportTreeExcel 函数即可。
例子：
export default {
data() {
return {
dataList: [
{
id: 1,
name: 'A',
children: [
{
id: 2,
name: 'A-1',
children: [
{
id: 3,
name: 'A-1-1',
children: []
}
]
}
]
},
{
id: 4,
name: 'B',
children: []
}
],
columns: [
{
label: '编号',
prop: 'id'
},
{
label: '名称',
prop: 'name'
}
]
}
},
methods: {
exportExcel() {
exportTreeExcel(this.dataList, this.columns, 'tree-table')
}
}
}在上面的例子中，我们通过调用 exportTreeExcel 函数将树形表格数据导出为 Excel 文件。你可以像例子中一样将该函数封装到工具库中，以便在其他组件中方便地调用。
总结
以上就是在Vue中实现原样导出树形表格的方法。通过该方法，我们可以将树形表格数据导出为 Excel 文件，以方便其他用户查看和处理。如果你还有其他实现方式，欢迎在评论区与我们分享。
