Comment utiliser Vue et Excel pour filtrer et trier dynamiquement les données

Comment utiliser Vue et Excel pour filtrer et trier dynamiquement les données

1 Introduction
Excel est un puissant outil de traitement de données et Vue est un framework JavaScript populaire pour créer des interfaces utilisateur. Dans le développement réel, nous devrons peut-être utiliser Vue pour filtrer et trier dynamiquement les données dans les tableaux Excel. Cet article vous expliquera comment utiliser Vue et Excel pour filtrer et trier dynamiquement les données.

2. Préparation technique
Avant de commencer, assurez-vous d'avoir installé les logiciels suivants :

1. Node.js et npm : utilisés pour installer vue-cli et d'autres dépendances.
2. Vue CLI : utilisé pour créer et gérer des projets Vue.
3. pandas et openpyxl : pour le traitement des fichiers et des données Excel.

3. Créez un projet Vue
Tout d'abord, utilisez Vue CLI pour créer un nouveau projet Vue. Ouvrez la ligne de commande et exécutez la commande suivante :

vue create dynamic-excel
cd dynamic-excel

Ensuite, sélectionnez la configuration par défaut pour créer le projet.

4. Installez les dépendances nécessaires
Ensuite, installez les dépendances requises. Exécutez la commande suivante dans la ligne de commande :

npm install xlsx vuetify axios

La commande ci-dessus installera xlsx, utilisé pour traiter les fichiers Excel ; vuetify, utilisé pour créer une belle interface utilisateur ; axios, utilisé pour effectuer des requêtes réseau.

5. Créer des composants et des styles
Créez un dossier nommé composants dans le répertoire src pour stocker les composants. Créez un fichier nommé ExcelTable.vue dans le dossier des composants pour afficher les tableaux Excel. Créez un fichier nommé ExcelTable.scss sous le dossier styles pour écrire des styles.

Le code ExcelTable.vue est le suivant :

<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>

Le code ExcelTable.scss est le suivant :

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

6. Utilisez le composant ExcelTable
Utilisez le composant ExcelTable dans le fichier App.vue. Le code est le suivant :

<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. Traiter les fichiers et les données Excel
Ensuite, nous présenterons comment traiter les fichiers et les données Excel. Créez un dossier nommé utils dans le répertoire src pour stocker les fonctions de l'outil. Créez un fichier nommé excel.js sous le dossier utils pour traiter les fichiers et les données Excel.

Le code Excel.js est le suivant :

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. Traitement des données du backend
Selon la situation réelle, vous pouvez utiliser axios pour obtenir des fichiers Excel ou des données du backend et transmettre les données au composant ExcelTable.

9. Compilez et exécutez
Exécutez les commandes suivantes dans la ligne de commande pour compiler et exécuter le projet :

npm run serve

Ouvrez le navigateur et visitez http://localhost:8080 pour voir le tableau Excel filtré et trié dynamiquement.

Résumé
Cet article explique comment utiliser Vue et Excel pour filtrer et trier dynamiquement les données. En créant un projet Vue, en installant les dépendances nécessaires, en créant des composants et des styles et en traitant les fichiers et les données Excel, un tableau Excel filtré et trié dynamiquement a finalement été implémenté. J'espère que cet article vous aidera à comprendre comment utiliser Vue et Excel pour filtrer et trier dynamiquement les données.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!