Tutoriel de base VUE3 : Utiliser le plug-in Vue.js pour encapsuler les composants de la table

Avec la popularité du développement de séparation front-end et back-end, les frameworks et outils front-end se sont progressivement développés en un système relativement indépendant. Parmi eux, Vue.js, en tant que leader, a attiré l'attention et l'utilisation. de plus en plus de développeurs. Cet article sera basé sur la version Vue.js 3.x et présentera comment utiliser le plug-in Vue.js pour encapsuler un composant table.

Déterminer les exigences

Avant d'utiliser Vue.js pour encapsuler un composant de table, vous devez d'abord déterminer les exigences et les fonctions du composant. Nous pouvons énumérer les exigences suivantes :

• Supporter la saisie dynamique des données et générer un tableau basé sur les données
• Supporter le tri des colonnes en fonction des informations d'en-tête du tableau#🎜🎜 #
Supporte la fonction de recherche et filtre les données cibles en fonction de mots-clés
• Supporte la fonction de pagination

Après avoir clarifié les besoins et les fonctions, nous avons commencé à saisir le stade de développement formel.

Écriture du plug-in Vue.js

Dans Vue.js, un plug-in est un objet javascript avec une méthode d'installation. Lorsque le plug-in est enregistré, la méthode d'installation sera appelée. Dans cette méthode, nous pouvons créer des composants globaux, des instructions ou ajouter des méthodes d'instance, etc.

Nous avons nommé le plug-in VueTablePlugin, créons ce plug-in vue.

const VueTablePlugin = {
  install: function (Vue) {
    // 全局组件
    Vue.component('vue-table', {
      // 组件选项
    })
  }
}

D'accord, maintenant que nous avons créé le plug-in vue, ajoutons des options de composants.

Composant de table d'écriture

Étant donné que le composant de table doit prendre en charge l'affichage et la recherche dynamiques des données, le tri, la pagination et d'autres fonctions, nous devons effectuer une série de traitements à l'intérieur du composant . Tout d'abord, nous pouvons définir certaines options et accessoires du composant :

Vue.component('vue-table', {
  props: {
    data: Array,   // 父组件传入的数据
    columns: Array // table头部信息
  },
  data () {
    return {
      searchKey: '',   // 搜索关键字
      sortKey: '',     // 排序关键字
      current: 1,      // 当前页
      pageSize: 5,     // 每页显示数量
    }
  },
  computed: {
    filteredData: function () {
      return this.data.filter((row) => {
        return Object.values(row).some(val => {
          return String(val).includes(this.searchKey)
        })
      })
    },
    sortedData: function () {
      if (!this.sortKey) {
        return this.filteredData
      }
      return this.filteredData.sort((a, b) => {
        a = a[this.sortKey]
        b = b[this.sortKey]
        return a === b ? 0 : a > b ? 1 : -1
      })
    },
    pageCount: function () {
      return Math.ceil(this.filteredData.length / this.pageSize)
    },
    paginatedData: function () {
      const start = (this.current - 1) * this.pageSize
      return this.sortedData.slice(start, start + this.pageSize)
    }
  },
  methods: {
    sortBy (key) {
      this.sortKey = key
      this.current = 1
    },
    prevPage () {
      this.current--
      if (this.current < 1) this.current = 1
    },
    nextPage () {
      this.current++
      if (this.current > this.pageCount) this.current = this.pageCount
    }
  },
  template: `
    <table>
      <thead>
        <tr>
          <th v-for="col in columns"
              :key="col.key"
              @click="sortBy(col.key)"
              :class="{active: sortKey === col.key}">
            {{ col.name }}
          </th>
        </tr>
        <tr>
          <th v-for="col in columns">
            <input type="text" v-model="searchKey">
          </th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="row in paginatedData" :key="row.id">
          <td v-for="col in columns" :key="col.key">
            {{ row[col.key] }}
          </td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td colspan="100%">
            <button @click="prevPage">Prev</button>
            <button @click="nextPage">Next</button>
          </td>
        </tr>
      </tfoot>
    </table>
  `
})

Puisque nous écrivons le composant table dans le plug-in, nous n'avons pas besoin d'introduire de composants lors de l'utilisation de ce composant. pour l'ajouter à n'importe quelle vue Enregistrez le plug-in sous l'instance pour utiliser le composant.

Utiliser le composant table

Après avoir créé notre plug-in vue et notre composant table ci-dessus, nous pouvons facilement utiliser le composant dans n'importe quelle instance de vue. Les opérations spécifiques sont les suivantes : # 🎜🎜#

Introduisez vue-table-plugin dans l'instance vue qui utilise ce composant :

import VueTablePlugin from './path/to/vue-table-plugin.js'

Enregistrez ensuite le plug-in dans l'instance vue :

Vue.use(VueTablePlugin)

#🎜🎜 # De cette façon, vous pouvez facilement utiliser le composant vue-table sous l'instance vue :

<template>
  <div>
    <vue-table :data="tableData" :columns="columns"></vue-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { id: 1, name: 'John Doe', age: 29, occupation: 'Software Engineer' },
        { id: 2, name: 'Jane Doe', age: 30, occupation: 'Graphic Designer' },
        { id: 3, name: 'Aaron Lee', age: 25, occupation: 'Web Developer' },
        { id: 4, name: 'Amanda Smith', age: 27, occupation: 'UI Designer' },
        { id: 5, name: 'Jack Ma', age: 55, occupation: 'Entrepreneur' },
        { id: 6, name: 'Elon Musk', age: 49, occupation: 'Inventor' },
        { id: 7, name: 'Stephen Hawking', age: 76, occupation: 'Physicist' },
        { id: 8, name: 'Albert Einstein', age: 76, occupation: 'Theoretical Physicist' }
      ],
      columns: [
        { name: 'ID', key: 'id' },
        { name: 'Name', key: 'name' },
        { name: 'Age', key: 'age' },
        { name: 'Occupation', key: 'occupation' }
      ]
    }
  }
}
</script>

De cette façon, nous avons terminé l'encapsulation d'un simple composant vue-table et utilisé le plug-in vue- po utilisé. Dans l'environnement de production actuel, nous pouvons l'optimiser et l'étendre dans une certaine mesure et développer un composant de table plus flexible et plus pratique.

Résumé

Le plug-in vue et le composant table de cet article ne sont qu'un package préliminaire. En développement réel, ils doivent être personnalisés et étendus en fonction des besoins à atteindre. l'effet final. Il est recommandé de s'entraîner et de se développer dans le développement réel, de peaufiner constamment votre propre bibliothèque de composants et d'améliorer vos propres capacités de développement.

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!