<template>
  <div>
    <vxe-table
      ref="treeTable"
      :data="treeData"
      show-header
      tree-config="{ children: 'children' }"
      :export-config="{ isColgroup: false, isMerge: false }"
    >
      <vxe-table-column type="seq" width="60"></vxe-table-column>
      <vxe-table-column field="name" title="Name" width="150"></vxe-table-column>
      <vxe-table-column field="age" title="Age" width="80"></vxe-table-column>
    </vxe-table>
    <button @click="exportToXlsx">Export to XLSX</button>
  </div>
</template>
<script>
import { VXETable } from 'vxe-table'
import 'vxe-table/lib/style.css'

export default {
  data() {
    return {
      treeData: [
        {
          name: 'John Doe',
          age: 25,
          children: [
            {
              name: 'Jane Smith',
              age: 30,
              children: [
                {
                  name: 'Tom Johnson',
                  age: 35
                }
              ]
            }
          ]
        },
        {
          name: 'Bob Williams',
          age: 40,
          children: [
            {
              name: 'Alice Brown',
              age: 45
            }
          ]
        }
      ]
    }
  },
  methods: {
    exportToXlsx() {
      const exportOptions = {
        columns: [
          { field: 'seq', title: 'Seq', width: 60 },
          { field: 'name', title: 'Name', width: 150 },
          { field: 'age', title: 'Age', width: 80 }
        ],
        data: this.$refs.treeTable.getTableData().fullData
      }
      VXETable.exportDataToExcel(exportOptions)
    }
  },
  mounted() {
    VXETable.setup({
      table: {
        exportConfig: {
          types: ['xlsx']
        }
      }
    })
  }
}
</script>
vxe-table 3.6.9 导出树形表格序号问题 - type=

原文地址: https://www.cveoy.top/t/topic/pzby 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录