Bagaimana untuk mengeksport jadual pokok seperti dalam Vue

Jadual pokok ialah kaedah paparan biasa dalam projek dan pada masa ini Vue merupakan salah satu rangka kerja yang paling biasa digunakan pada bahagian hadapan. Jadi, bagaimana untuk mengeksport jadual pokok seperti dalam Vue? Di bawah ini saya akan memperkenalkan satu cara untuk mencapai ini.

Kaedah

Pertama, kita perlu memasang pustaka xlsx, yang boleh mengeksport data ke dalam jadual Excel. Masukkan arahan berikut pada baris arahan untuk memasang:

npm install xlsx --save

Seterusnya, kita perlu merangkum fungsi untuk menjana fail 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
}

Dalam kod ini, kita merangkumkan Fungsi exportTreeExcel, yang menerima tiga parameter, iaitu data yang akan dieksport, maklumat lajur dan nama fail eksport. Dalam fungsi ini, kami mula-mula meratakan data pokok dengan memanggil fungsi getExportData dan mengekstrak medan yang perlu dieksport. Kemudian, kami menggunakan perpustakaan XLSX untuk menukar data ke dalam format Excel dan menulis data ke fail melalui kaedah writeFile. Fungsi

getExportData digunakan untuk meratakan data pokok dan mengekstrak medan yang perlu dieksport. Dalam fungsi ini, kami menentukan sama ada nod semasa mempunyai nod anak Jika ya, proseskan nod anak secara rekursif dan tambahkan data nod anak pada tatasusunan hasil.

Akhir sekali, kita boleh memanggil fungsi exportTreeExcel di mana kita perlu mengeksport jadual pokok.

Contoh:

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')
    }
  }
}

Dalam contoh di atas, kami mengeksport data jadual pokok ke fail Excel dengan memanggil fungsi exportTreeExcel. Anda boleh merangkum fungsi ini ke dalam perpustakaan alat seperti dalam contoh supaya ia boleh dipanggil dengan mudah dalam komponen lain.

Ringkasan

Di atas ialah cara mengeksport jadual pokok seperti yang terdapat dalam Vue. Melalui kaedah ini, kami boleh mengeksport data jadual pokok ke fail Excel untuk memudahkan pengguna lain melihat dan memproses. Jika anda mempunyai kaedah pelaksanaan lain, sila kongsikannya dengan kami di ruang komen.

Atas ialah kandungan terperinci Bagaimana untuk mengeksport jadual pokok seperti dalam Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!