Vue と Excel を使用してデータを動的にフィルタリングおよび並べ替える方法

Vue と Excel を使用してデータの動的なフィルタリングと並べ替えを実装する方法

1. はじめに
Excel テーブルは強力なデータ処理ツールであり、Vue はユーザー インターフェイスを構築するための人気のある JavaScript フレームワークです。 。実際の開発では、Vue を使用して Excel テーブル内のデータを動的にフィルタリングおよび並べ替える必要がある場合があります。この記事では、Vue と Excel を使用してデータを動的にフィルターおよび並べ替える方法を紹介します。

2. 技術的な準備
開始する前に、次のソフトウェアがインストールされていることを確認してください:

1. Node.js および npm: vue-cli およびその他の依存関係のインストールに使用されます。 。
2. Vue CLI: Vue プロジェクトの作成と管理に使用されます。
3. pandas と openpyxl: Excel ファイルとデータの処理に使用されます。

3. Vue プロジェクトの作成
まず、Vue CLI を使用して新しい Vue プロジェクトを作成します。コマンド ラインを開き、次のコマンドを実行します:

vue create dynamic-excel
cd dynamic-excel

次に、デフォルト構成を選択してプロジェクトを作成します。

4. 必要な依存関係をインストールする
次に、必要な依存関係をインストールします。コマンド ラインで次のコマンドを実行します:

npm install xlsx vuetify axios

上記のコマンドは、Excel ファイルの処理に使用される xlsx、美しいユーザー インターフェイスの構築に使用される vuetify、ネットワーク リクエストの作成に使用される axios をインストールします。

5. コンポーネントとスタイルを作成する
コンポーネントを保存するために、src ディレクトリに「components」という名前のフォルダーを作成します。 Excel テーブルを表示するには、コンポーネント フォルダーに ExcelTable.vue という名前のファイルを作成します。スタイルを記述するために、styles フォルダーの下に ExcelTable.scss という名前のファイルを作成します。

ExcelTable.vue コードは次のとおりです:

<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 コードは次のとおりです:

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

6. ExcelTable コンポーネントを使用します
ExcelTable コンポーネントを使用しますApp.vue ファイル内。コードは次のとおりです:

<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. Excel ファイルとデータの処理
次に、Excel ファイルとデータの処理方法を紹介します。ツール関数を保存するために、src ディレクトリに utils という名前のフォルダーを作成します。 Excel ファイルとデータを処理するために、utils フォルダーの下に Excel.js という名前のファイルを作成します。

excel.js コードは次のとおりです:

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. バックエンド データの処理
実際の状況に応じて、axios を使用してバックエンドから Excel ファイルまたはデータを取得できます。 -end し、データを ExcelTable コンポーネントに渡します。

9. コンパイルと実行
コマンド ラインで次のコマンドを実行して、プロジェクトをコンパイルして実行します:

npm run serve

ブラウザを開いて、http://localhost:8080 にアクセスして確認します。 Excel テーブルを動的にフィルタリングして並べ替えます。

概要
この記事では、Vue と Excel を使用してデータを動的にフィルターおよび並べ替える方法を紹介します。 Vue プロジェクトを作成し、必要な依存関係をインストールし、コンポーネントとスタイルを作成し、Excel ファイルとデータを処理することにより、最終的に動的にフィルターおよび並べ替えられた Excel テーブルが実装されました。この記事が、Vue と Excel を使用してデータを動的にフィルターおよび並べ替える方法を理解するのに役立つことを願っています。

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