Cara menggunakan Vue dan Excel untuk melaksanakan penapisan kelompok dan eksport data

Cara menggunakan Vue dan Excel untuk melaksanakan penapisan kelompok dan eksport data

Dalam pembangunan projek sebenar, kita selalunya perlu menapis dan mengeksport sejumlah besar data. Sebagai rangka kerja bahagian hadapan yang popular, Vue boleh digunakan bersama-sama dengan alatan seperti Excel untuk melaksanakan penapisan kelompok dan eksport data dengan cepat dan mudah. Artikel ini akan memperkenalkan cara menggunakan Vue dan Excel untuk melaksanakan fungsi ini, dan memberikan contoh kod sebagai rujukan.

1. Persediaan
   Pertama, kita perlu memasang dan memperkenalkan Vue serta pemalam serta perpustakaan yang berkaitan. Tutorial pemasangan dan penggunaan yang berkaitan boleh didapati dalam dokumentasi rasmi Vue. Dalam artikel ini, kami akan menggunakan Vue CLI untuk mencipta projek asas Vue. Operasi khusus adalah seperti berikut:

1.1 Pasang Vue CLI:
Masukkan arahan berikut pada baris arahan untuk memasang Vue CLI.

npm install -g @vue/cli

1.2 Cipta projek Vue:
Masukkan arahan berikut pada baris arahan untuk mencipta projek Vue baharu.

vue create vue-excel-demo

Kemudian ikut gesaan untuk memilih konfigurasi lalai dan pemalam.

1.3 Pasang pemalam Vue Excel:
Masukkan direktori projek pada baris arahan dan masukkan arahan berikut untuk memasang pemalam Vue Excel dan kebergantungan yang berkaitan.

cd vue-excel-demo
npm install vue-excel-export xlsx

2. Buat jadual data
   Buat folder komponen dalam direktori src projek dan buat fail ExcelTable.vue di bawah folder. Dalam fail ExcelTable.vue, kami akan mencipta jadual data ringkas untuk memaparkan dan menapis data. Contoh kod adalah seperti berikut:

<template>
  <div>
    <input type="text" v-model="keyword" placeholder="请输入筛选关键字" />
    <button @click="filterData">筛选</button>
    <button @click="exportData">导出</button>

    <table>
      <thead>
        <tr>
          <th>姓名</th>
          <th>年龄</th>
          <th>性别</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in filteredData" :key="item.id">
          <td>{{ item.name }}</td>
          <td>{{ item.age }}</td>
          <td>{{ item.gender }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import { export_json_to_excel } from "xlsx";

export default {
  data() {
    return {
      data: [
        { id: 1, name: "张三", age: 18, gender: "男" },
        { id: 2, name: "李四", age: 20, gender: "女" },
        { id: 3, name: "王五", age: 22, gender: "男" }
      ],
      keyword: ""
    };
  },
  computed: {
    filteredData() {
      if (this.keyword === "") {
        return this.data;
      } else {
        return this.data.filter(item => item.name.includes(this.keyword));
      }
    }
  },
  methods: {
    filterData() {
      console.log("筛选数据");
      // 这里可以进行筛选逻辑的处理
    },
    exportData() {
      console.log("导出数据");
      const jsonData = JSON.parse(JSON.stringify(this.filteredData));
      const worksheet = xlsx.utils.json_to_sheet(jsonData);
      const workbook = xlsx.utils.book_new();
      xlsx.utils.book_append_sheet(workbook, worksheet, "Sheet1");
      const excelBuffer = xlsx.write(workbook, {
        bookType: "xlsx",
        type: "array"
      });
      const data = new Blob([excelBuffer], { type: "application/octet-stream" });
      FileSaver.saveAs(data, "导出数据.xlsx");
    }
  }
};
</script>

Dalam kod di atas, kami mencipta jadual data ringkas dan menggunakan arahan v-for untuk menggelungkan melalui data pemaparan. Pada masa yang sama, kami menggunakan atribut terkira filteredData untuk melaksanakan fungsi penapisan data dan menapis data secara dinamik berdasarkan kata kunci yang dimasukkan. Logik khusus fungsi penapisan boleh dikembangkan mengikut keperluan sebenar.

3. Gunakan pemalam Vue Excel untuk mengeksport data
   Dalam kod di atas, kami melaksanakan fungsi eksport data dengan mengklik butang eksport. Apabila pengguna mengklik butang eksport, kami mula-mula menukar data yang ditapis ke dalam struktur data lembaran kerja Excel, dan kemudian menggunakan pemalam Vue Excel untuk mengeksport data lembaran kerja ke dalam fail Excel. Contoh kod adalah seperti berikut:

// 导入相关库
import { export_json_to_excel } from "xlsx";
import FileSaver from "file-saver";

// 导出数据
exportData() {
  console.log("导出数据");
  // 将筛选后的数据转换为Excel的工作表数据结构
  const jsonData = JSON.parse(JSON.stringify(this.filteredData));
  const worksheet = xlsx.utils.json_to_sheet(jsonData);
  
  // 创建并配置Excel工作簿
  const workbook = xlsx.utils.book_new();
  xlsx.utils.book_append_sheet(workbook, worksheet, "Sheet1");
  
  // 导出Excel文件
  const excelBuffer = xlsx.write(workbook, {
    bookType: "xlsx",
    type: "array"
  });
  const data = new Blob([excelBuffer], { type: "application/octet-stream" });
  FileSaver.saveAs(data, "导出数据.xlsx");
}

Dalam kod di atas, kami mula-mula menukar data yang ditapis jsonData ke dalam lembaran kerja struktur data lembaran kerja Excel, kemudian mencipta buku kerja buku kerja Excel dan menambah lembaran kerja pada buku kerja. Akhir sekali, kami menggunakan pustaka FileSaver untuk menukar buku kerja kepada fail Excel dan menyimpannya secara setempat.

4. Kesimpulan
   Dengan menggunakan Vue dan Excel, kami boleh melaksanakan pengurusan data yang kompleks dan fungsi eksport dengan mudah. Artikel ini memperkenalkan cara menggunakan Vue dan Excel untuk melaksanakan penapisan kelompok dan eksport data serta menyediakan contoh kod khusus untuk rujukan pembaca. Saya harap artikel ini akan membantu semua orang dalam pembangunan sebenar.

Atas ialah kandungan terperinci Cara menggunakan Vue dan Excel untuk melaksanakan penapisan kelompok dan eksport data. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!