Grundlegendes VUE3-Tutorial: Verwenden Sie das Vue.js-Plug-in, um Tabellenkomponenten zu kapseln

Mit der Popularität der getrennten Entwicklung von Front-End und Back-End haben sich Front-End-Frameworks und -Tools nach und nach zu einem relativ unabhängigen System entwickelt. Unter ihnen hat Vue.js als Marktführer die Aufmerksamkeit und Verwendung von mehr auf sich gezogen und mehr Entwickler. Dieser Artikel basiert auf der Version Vue.js 3.x und stellt die Verwendung des Vue.js-Plug-Ins zum Kapseln einer Tabellenkomponente vor.

Anforderungen ermitteln

Bevor Sie Vue.js zum Kapseln einer Tabellenkomponente verwenden, müssen Sie zunächst die Anforderungen und Funktionen der Komponente ermitteln. Wir können die folgenden Anforderungen auflisten:

• Unterstützung der dynamischen Eingabe von Daten und Generierung von Tabellen basierend auf Daten
• Unterstützung der Spaltensortierung basierend auf Tabellenkopfinformationen
• Unterstützung der Suchfunktion und Herausfiltern von Zieldaten basierend auf Schlüsselwörtern
• Unterstützung der Paging-Funktion

Nachdem wir die Anforderungen und Funktionen geklärt hatten, begannen wir mit dem Eintritt in die formale Entwicklungsphase.

Vue.js-Plug-in schreiben

In Vue.js ist ein Plug-in ein Javascript-Objekt mit einer Installationsmethode. Wenn das Plug-in registriert ist, wird die Installationsmethode aufgerufen. Mit dieser Methode können wir globale Komponenten, Anweisungen erstellen oder Instanzmethoden usw. hinzufügen.

Wir haben das Plug-in VueTablePlugin genannt, erstellen wir dieses Vue-Plug-in.

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

Okay, jetzt, da wir das Vue-Plug-in erstellt haben, fügen wir Komponentenoptionen hinzu.

Schreiben der Tabellenkomponente

Da die Tabellenkomponente die dynamische Datenanzeige und Suche, Sortierung, Paginierung und andere Funktionen unterstützen muss, müssen wir eine Reihe von Prozessen innerhalb der Komponente ausführen. Zuerst können wir einige Optionen und Requisiten der Komponente definieren:

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

Da wir die Tabellenkomponente in das Plug-In schreiben, müssen wir bei Verwendung dieser Komponente keine Komponenten einführen. Wir müssen das Plug-In nur registrieren Unter jeder Vue-Instanz kann diese Komponente verwendet werden.

Tabellenkomponente verwenden

Nachdem wir oben unser Vue-Plug-in und die Tabellenkomponente erstellt haben, können wir diese Komponente problemlos in jeder Vue-Instanz verwenden. Die spezifischen Vorgänge sind wie folgt:

Führen Sie sie in die Vue-Instanz ein, die diese Vue-Komponente verwendet -table-plugin:

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

Registrieren Sie dann das Plug-in in der Vue-Instanz:

Vue.use(VueTablePlugin)

Auf diese Weise können Sie die Vue-Table-Komponente problemlos unter der Vue-Instanz verwenden:

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

Auf diese Weise haben wir es abgeschlossen Eine einfache Die Vue-Table-Komponente wird gekapselt und mithilfe des Vue-Plug-Ins verwendet. In der tatsächlichen Produktionsumgebung können wir sie bis zu einem gewissen Grad optimieren und erweitern und eine flexiblere und praktischere Tischkomponente entwickeln.

Zusammenfassung

Das Vue-Plug-In und die Tabellenkomponente in diesem Artikel sind nur ein vorläufiges Paket. In der tatsächlichen Entwicklung müssen sie entsprechend den Anforderungen angepasst und erweitert werden, um den endgültigen Effekt zu erzielen. Es wird empfohlen, die tatsächliche Entwicklung zu üben und zu erweitern, Ihre eigene Komponentenbibliothek ständig zu verbessern und Ihre eigenen Entwicklungsfunktionen zu verbessern.

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