Grundlagen der VUE3-Entwicklung: Verwenden Sie das Vue.js-Plug-in, um Datentabellenkomponenten zu kapseln

In der Vue3-Entwicklung ist die Datentabelle eine der grundlegendsten und am häufigsten verwendeten Komponenten. Bei der tatsächlichen Anwendungsentwicklung müssen wir häufig große Datenmengen verarbeiten und anzeigen. Die Datentabellenkomponente kann je nach Datenformat elegantes Paging, Sortieren, Filtern und andere Vorgänge an Daten durchführen, um den Anforderungen der Datenvisualisierungsanzeige gerecht zu werden.

Vue.js bietet als beliebtes Frontend-Framework viele praktische Komponenten und APIs. Da die Geschäftsanforderungen jedoch weiter steigen, kann es Situationen geben, in denen die Nachfrage nicht gedeckt werden kann. Zu diesem Zeitpunkt können wir den Plug-In-Mechanismus von Vue.js verwenden, um einige benutzerdefinierte Komponenten zu entwickeln, um spezielle Geschäftsanforderungen zu erfüllen.

Als nächstes wird in diesem Artikel erläutert, wie Sie den Vue.js-Plug-in-Mechanismus verwenden, um eine Datentabellenkomponente zu kapseln und die folgenden Funktionen zu implementieren:

1. Daten auf Seiten anzeigen
2. Tabellendaten sortieren
3. Tabellendaten filtern
4. Daten in Seiten anzeigen

Bei der Anzeige großer Datenmengen führt das Rendern aller Daten auf einmal dazu, dass das Laden der Seite verlangsamt wird und die Leistung abnimmt. Daher müssen wir die Daten in Seiten anzeigen. Hier können wir das Vue.js-Plugin verwenden – „vuejs-paginate“. Dieses Plug-in kann Array-Daten gemäß den angegebenen Paging-Parametern aufteilen und bietet Datenanzeige- und Seitenwechselfunktionen.

Nach der Installation des Plug-Ins „vuejs-paginate“ müssen wir es initialisieren. Die spezifische Konfiguration ist wie folgt:

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);
    }
  }
})

Mit dem obigen Code können Sie eine benutzerdefinierte Paging-Komponente mit dem Namen „my-paginate“ definieren und das Plug-in „vuejs-paginate“ global registrieren. Der für diese Paging-Komponente erforderliche Parameter ist ein Array-Datentyp. Intern werden berechnete Eigenschaften verwendet, um die Array-Daten zu paginieren, anstatt alle Daten auf einmal darzustellen.

2. Tabellendaten sortieren

Um die Daten in der Tabelle zu sortieren, besteht die einfachste Möglichkeit darin, die Array-Daten zu sortieren und sie dann in der Tabelle darzustellen. Vue3 bietet eine Funktion – „berechnet“, die Daten sortieren, Datenänderungen automatisch überwachen und neu rendern kann.

Lassen Sie uns eine Komponente definieren, die Tabellendaten sortieren und die Funktion zum Umschalten der aufsteigenden und absteigenden Reihenfolge implementieren kann.

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. Tabellendaten filtern

Wir können der Tabelle ein Suchfeld hinzufügen, um die Tabellendaten nach Schlüsselwörtern zu filtern. Vue3 bietet eine sehr nützliche Funktion zum Filtern von Daten – „berechnet“.

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>
  `
})

Der obige Code ist eine einfache Filterkomponente. Durch die bidirektionale Bindung der berechneten Berechnungsfunktion und des V-Modells können die Eingabeschlüsselwörter gefiltert und der gefilterte Tabellenanzeigeeffekt in Echtzeit aktualisiert werden.

Zusammenfassung:

Anhand der obigen Beispiele haben wir eine kurze Einführung in die Entwicklung von Vue3-Plug-Ins gegeben und den Plug-In-Mechanismus zum Kapseln einer Datentabellenkomponente verwendet. Gleichzeitig zeigten wir auch, wie Datenverarbeitungsfunktionen wie Paging, Sortieren und Filtern von Tabellendaten durch berechnete Berechnungsfunktionen, V-Modell-Bindung, Slots usw. implementiert werden. Diese Plug-in-Entwicklungsmethode kann unsere Codestruktur klarer und Komponenten wiederverwendbar machen und spielt auch eine positive Rolle bei der Projektwartung und -aktualisierung.

Das obige ist der detaillierte Inhalt vonGrundlagen der VUE3-Entwicklung: Verwenden Sie das Vue.js-Plug-in, um Datentabellenkomponenten zu kapseln. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!