Bases du développement VUE3 : utilisez le plug-in Vue.js pour encapsuler les composants de la table de données

Dans le développement de Vue3, la table de données est l'un des composants les plus basiques et les plus couramment utilisés. Dans le développement d’applications réelles, nous devons souvent traiter et afficher de grandes quantités de données. Le composant de table de données peut effectuer une pagination, un tri, un filtrage et d'autres opérations élégantes sur les données en fonction du format des données pour répondre aux besoins d'affichage de la visualisation des données.

Vue.js, en tant que framework front-end populaire, fournit de nombreux composants et API pratiques. Cependant, à mesure que les besoins des entreprises continuent d’augmenter, il peut y avoir des situations où la demande ne peut être satisfaite. À l'heure actuelle, nous pouvons utiliser le mécanisme de plug-in Vue.js pour développer des composants personnalisés afin de répondre à des besoins commerciaux particuliers.

Ci-dessous, cet article présentera comment utiliser le mécanisme du plug-in Vue.js pour encapsuler un composant de table de données et implémenter les fonctions suivantes :

1. Paging affichage des données#🎜🎜 #
Trier les données du tableau
2. Filtrer les données du tableau
3. Données d'affichage des pages

Pour l'affichage de grandes quantités de données, le rendu unique de toutes les données entraînera un chargement plus lent de la page et réduira les performances. Par conséquent, nous devons afficher les données en pages. Ici, nous pouvons utiliser le plug-in Vue.js - "vuejs-paginate". Ce plug-in peut diviser les données du tableau en fonction de paramètres de pagination spécifiés et fournit des fonctions d'affichage des données et de changement de page.

Après avoir installé le plug-in "vuejs-paginate", il faut l'initialiser. La configuration spécifique est la suivante :

import Vue from 'vue'
import Paginate from 'vuejs-paginate'

// 全局注册分页组件
Vue.component('paginate', Paginate);

// 分页参数配置
var options = {
  perPage: 10,
  perPageValues: [10, 20, 50],
  containerClass: 'pagination',
  infoClass: 'pagination__info',
  paginationClass: 'pagination__list',
  itemClass: 'pagination__item',
  linkClass: 'pagination__link'
}

// 定义分页组件
Vue.component('my-paginate', {
  components: {
    Paginate
  },
  props: {
    items: {
      type: Array, // 数据类型为数组
      required: true // 验证数据必传
    }
  },
  data() {
    return {
      currentPage: 1, // 当前页码
      options: options // 分页参数
    }
  },
  computed: {
    // 分页处理后的数据
    paginatedItems() {
      var start = (this.currentPage - 1) * this.options.perPage;
      var end = start + this.options.perPage;
      return this.items.slice(start, end);
    }
  }
})

Avec le code ci-dessus, vous pouvez définir un composant de pagination personnalisé nommé "my-paginate" et enregistrer le plug-in "vuejs-paginate" globalement. Le paramètre requis par ce composant de pagination est un type de tableau de données. En interne, il utilise des propriétés calculées pour paginer les données du tableau au lieu de restituer toutes les données en même temps.

2. Trier les données du tableau

Le moyen le plus simple de trier les données du tableau est de trier les données du tableau, puis de les restituer dans le tableau. Vue3 fournit une fonction - "calculée", qui peut trier les données, surveiller automatiquement les modifications des données et effectuer un nouveau rendu.

Définissons un composant capable de trier les données du tableau et d'implémenter la fonction de commutation par ordre croissant et décroissant.

Vue.component('my-sorter', {
  props: {
    data: {
      type: Array,
      required: true
    },
    sortIndex: {
      type: Number, // 数字类型
      required: true
    }
  },
  data() {
    return { 
      direction: true // 排序切换方向
    }
  },
  computed: {
    sortedData() { // 数据排序处理
      var copyData = Object.assign([], this.data); // 浅拷贝数组
      var direction = this.direction ? 1 : -1; // 升序或降序
      copyData.sort(function(a, b) {
        if (a[this.sortIndex] < b[this.sortIndex]) return -1 * direction;
        if (a[this.sortIndex] > b[this.sortIndex]) return direction;
        return 0
      }.bind(this))
      return copyData;
    }
  },
  methods: {
    // 点击表头，切换排序方向
    toggle() {
      this.direction = !this.direction;
    }
  },
  template: `
    <th @click="toggle">
      {{ $slots.default[0].text }} 
      <i v-if="direction" class="glyphicon glyphicon-chevron-up"></i>
      <i v-else class="glyphicon glyphicon-chevron-down"></i>
    </th>
  `
})

3. Filtrer les données du tableau

Nous pouvons ajouter un champ de recherche au tableau pour filtrer les données du tableau en fonction de mots-clés. Vue3 fournit une fonction très utile pour filtrer les données - "calculées".

Vue.component('my-filter', {
  props: {
    data: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      search: ''
    }
  },
  computed: {
    filteredData() {
      var searchKey = this.search.toLowerCase();
      return this.data.filter(item => {
        // 遍历数组内的每一项，如果包含搜索关键词，就保留这一项数据
        return Object.keys(item).some(key => {
          return String(item[key]).toLowerCase().indexOf(searchKey) > -1
        })
      })
    }
  },
  template: `
    <div>
      <input v-model="search" class="form-control" type="text" placeholder="搜索...">
      <table class="table table-bordered">
      <thead>
        <slot name="thead"></slot>
      </thead>
      <tbody>
        <tr v-for="item in filteredData">
          <slot name="tbody" :item="item"></slot>
        </tr>
      </tbody>
      </table>
    </div>
  `
})

Le code ci-dessus est un simple composant de filtre. Grâce à la liaison bidirectionnelle de la fonction de calcul calculée et du modèle v, les mots-clés d'entrée peuvent être filtrés et l'effet d'affichage du tableau filtré peut être actualisé en temps réel.

Résumé :

À travers l'exemple ci-dessus, nous avons donné une brève introduction sur la façon de développer le plug-in Vue3 et utilisé le mécanisme du plug-in pour encapsuler un composant de table de données . Dans le même temps, nous avons également montré comment implémenter des fonctions de traitement de données telles que la pagination, le tri et le filtrage des données de table via des fonctions de calcul, la liaison de modèle V, les emplacements, etc. Cette méthode de développement de plug-ins peut rendre notre structure de code plus claire et nos composants plus réutilisables, et elle joue également un rôle positif dans la maintenance et les mises à niveau du projet.

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!