Vue と Excel を使用してテーブル データを関連付けてフィルタリングする方法

Vue と Excel を使用してテーブル データを関連付け、フィルター処理する方法

はじめに:
データ分析と処理の需要が高まるにつれ、Excel テーブルはあらゆる分野で最も一般的に使用されるデータ処理になりました。 . 道具の一つ。最新のデータ処理要件では、Excel テーブルを他のフロントエンド フレームワークと組み合わせて、より柔軟で効率的なデータの関連付けとフィルター機能を実現する必要があります。この記事では、Vue と Excel を使用して表形式データを関連付け、フィルターする方法を紹介します。

1. 準備
開始する前に、次のツールとライブラリをインストールして構成する必要があります:

1. Node.js と npm をインストールします。公式ウェブサイト Node.js と npm のバージョン。
2. Vue のインストール: コマンド ラインで次のコマンドを実行してインストールします。

npm install vue

3. Excel.js をインストールする: コマンド ラインで次のコマンドを実行してインストールします。

npm install exceljs

4. xlsx.js をインストールする: コマンド ラインで次のコマンドを実行してインストールします。

npm install xlsx

2. ロジックの実装
次に、次の手順でテーブル データの関連付けとフィルター機能を実装します。

1. Excel ファイルのインポート
   まず、Vue コンポーネントに Excel ファイルをインポートする機能を実装する必要があります。

<template>
  <div>
    <input type="file" @change="importExcel" accept=".xlsx,.xls" />
    <button @click="filterData">筛选</button>
  </div>
</template>

<script>
import { writeFile } from 'xlsx';

export default {
  methods: {
    importExcel(event) {
      const files = event.target.files;
      const reader = new FileReader();

      reader.onload = (e) => {
        const data = new Uint8Array(e.target.result);
        const workbook = XLSX.read(data, { type: 'array' });
        const worksheet = workbook.Sheets[workbook.SheetNames[0]];
        const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 });

        // 存储Excel数据
        this.excelData = jsonData;
      };

      reader.readAsArrayBuffer(files[0]);
    },
    filterData() {
      // 根据筛选条件过滤数据
      // ...
    },
  },
};
</script>

上記のコードでは、importExcel メソッドを使用して、インポートされた Excel ファイルを JSON データに変換し、Vue コンポーネントの excelData に保存します。プロパティ。

2. データのフィルタリング
   次に、フィルタリング条件に基づいてデータをフィルタリングする機能を実装する必要があります。

<template>
  <div>
    <input type="file" @change="importExcel" accept=".xlsx,.xls" />
    <button @click="filterData">筛选</button>
    <input v-model="filterValue" placeholder="请输入筛选条件" />
    <button @click="applyFilter">确认</button>
    <table>
      <thead>
        <tr>
          <th v-for="(header, index) in excelData[0]" :key="index">{{ header }}</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(row, index) in filteredData" :key="index">
          <td v-for="(cell, index) in row" :key="index">{{ cell }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      excelData: [],
      filteredData: [],
      filterValue: '',
    };
  },
  methods: {
    importExcel(event) {
      // ...
    },
    filterData() {
      // ...
    },
    applyFilter() {
      // 根据筛选条件过滤数据
      this.filteredData = this.excelData.filter((row) => {
        return row.some((cell) => {
          return cell.toString().includes(this.filterValue);
        });
      });
    },
  },
};
</script>

上記のコードでは、入力ボックスと確認ボタンを追加しました。ユーザーは入力ボックスにフィルター条件を入力し、確認ボタンをクリックして applyFilter# をトリガーできます。 ＃＃ 方法。 applyFilter メソッドは、excelData 配列を走査することでフィルター条件に基づいてデータをフィルターし、結果を filteredData 属性に保存します。

概要:

上記の手順により、Vue と Excel を介してテーブル データの関連付けとフィルター機能を実装することができました。 Excel ファイルのインポートとフィルタリング機能により、大量のデータをより柔軟かつ効率的に処理および分析できます。この記事がお役に立てば幸いです!

以上がVue と Excel を使用してテーブル データを関連付けてフィルタリングする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。