Cara menggunakan Vue dan Excel untuk menapis dan mengisih data secara dinamik

Cara menggunakan Vue dan Excel untuk menapis dan mengisih data secara dinamik

1 Pengenalan
Excel ialah alat pemprosesan data yang berkuasa, dan Vue ialah rangka kerja JavaScript yang popular untuk membina antara muka pengguna. Dalam pembangunan sebenar, kami mungkin perlu menggunakan Vue untuk menapis dan mengisih data secara dinamik dalam jadual Excel. Artikel ini akan memperkenalkan anda kepada cara menggunakan Vue dan Excel untuk menapis dan mengisih data secara dinamik.

2. Persediaan teknikal
Sebelum anda mula, pastikan anda telah memasang perisian berikut:

1. Node.js dan npm: digunakan untuk memasang vue-cli dan kebergantungan lain.
2. Vue CLI: digunakan untuk mencipta dan mengurus projek Vue.
3. pandas dan openpyxl: untuk memproses fail dan data Excel.

3 Cipta projek Vue
Pertama, gunakan Vue CLI untuk mencipta projek Vue baharu. Buka baris arahan dan laksanakan arahan berikut:

vue create dynamic-excel
cd dynamic-excel

Kemudian, pilih konfigurasi lalai untuk mencipta projek.

4. Pasang tanggungan yang diperlukan
Seterusnya, pasangkan tanggungan yang diperlukan. Jalankan arahan berikut dalam baris arahan:

npm install xlsx vuetify axios

Arahan di atas akan memasang xlsx, digunakan untuk memproses fail Excel, digunakan untuk membina antara muka pengguna yang cantik, digunakan untuk membuat permintaan rangkaian;

5. Cipta komponen dan gaya
Buat folder bernama komponen dalam direktori src untuk menyimpan komponen. Cipta fail bernama ExcelTable.vue dalam folder komponen untuk memaparkan jadual Excel. Buat fail bernama ExcelTable.scss di bawah folder gaya untuk gaya penulisan.

Kod ExcelTable.vue adalah seperti berikut:

<template>
  <div class="excel-table">
    <input v-model="searchKey" placeholder="输入关键词进行筛选" />
    <table>
      <thead>
        <tr>
          <th v-for="column in columns">{{ column }}</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="row in filteredData">
          <td v-for="column in row">{{ column }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  props: {
    data: {
      type: Array,
      required: true
    },
    columns: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      searchKey: ""
    };
  },
  computed: {
    filteredData() {
      if (this.searchKey) {
        return this.data.filter(row => {
          return row.some(column => {
            return column.includes(this.searchKey);
          });
        });
      } else {
        return this.data;
      }
    }
  }
};
</script>

<style scoped lang="scss">
.excel-table {
  input {
    margin-bottom: 10px;
  }
  table {
    width: 100%;
    border-collapse: collapse;
    th,
    td {
      border: 1px solid #ccc;
      padding: 5px;
    }
  }
}
</style>

ExcelTable.scss kod adalah seperti berikut:

@import "~vuetify/src/styles/styles.sass";

6. Gunakan komponen ExcelTable
Gunakan komponen ExcelTable dalam fail App.vue. Kodnya adalah seperti berikut:

<template>
  <div class="app">
    <excel-table :data="data" :columns="columns" />
  </div>
</template>

<script>
import ExcelTable from "./components/ExcelTable.vue";
export default {
  components: {
    ExcelTable
  },
  data() {
    return {
      data: [],
      columns: []
    };
  },
  mounted() {
    this.loadData();
  },
  methods: {
    loadData() {
      // 使用axios从后端获取数据
      // 此处省略数据请求的具体代码
      // 然后将数据赋值给this.data和this.columns
    }
  }
};
</script>

7. Proses fail dan data Excel
Seterusnya, kami akan memperkenalkan cara memproses fail dan data Excel. Buat folder bernama utils dalam direktori src untuk menyimpan fungsi alat. Buat fail bernama excel.js di bawah folder utils untuk memproses fail dan data Excel. Kod

excel.js adalah seperti berikut:

import XLSX from "xlsx";

export function readExcel(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = e => {
      const data = new Uint8Array(e.target.result);
      const workbook = XLSX.read(data, { type: "array" });
      const sheetName = workbook.SheetNames[0];
      const worksheet = workbook.Sheets[sheetName];
      const json = XLSX.utils.sheet_to_json(worksheet, { header: 1 });
      resolve(json);
    };
    reader.onerror = reject;
    reader.readAsArrayBuffer(file);
  });
}

8. Memproses data hujung belakang
Mengikut situasi sebenar, anda boleh menggunakan axios untuk mendapatkan fail atau data Excel dari bahagian belakang dan menghantar data kepada komponen ExcelTable.

9. Susun dan jalankan
Lakukan arahan berikut dalam baris arahan untuk menyusun dan menjalankan projek:

npm run serve

Buka penyemak imbas dan lawati http://localhost:8080 untuk melihat jadual Excel yang ditapis dan diisih secara dinamik.

Ringkasan
Artikel ini memperkenalkan cara menggunakan Vue dan Excel untuk menapis dan mengisih data secara dinamik. Dengan mencipta projek Vue, memasang kebergantungan yang diperlukan, mencipta komponen dan gaya, dan memproses fail dan data Excel, jadual Excel yang ditapis dan diisih secara dinamik akhirnya dilaksanakan. Saya harap artikel ini akan membantu anda memahami cara menggunakan Vue dan Excel untuk menapis dan mengisih data secara dinamik.

Atas ialah kandungan terperinci Cara menggunakan Vue dan Excel untuk menapis dan mengisih data secara dinamik. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!