VUE3 基本チュートリアル: Vue.js プラグインを使用してテーブル コンポーネントをカプセル化する

フロントエンドとバックエンドの分離開発の普及により、フロントエンドのフレームワークやツールは徐々に比較的独立したシステムへと発展してきましたが、その中でも Vue.js がリーダーとして注目され、利用されています。ますます多くの開発者。この記事は Vue.js 3.x バージョンに基づいており、Vue.js プラグインを使用してテーブル コンポーネントをカプセル化する方法を紹介します。

要件を決定する

Vue.js を使用してテーブル コンポーネントをカプセル化する前に、まずコンポーネントの要件と機能を決定する必要があります。次の要件を列挙できます。

• データの動的入力をサポートし、データに基づいてテーブルを生成する
• テーブル ヘッダー情報に基づいて列の並べ替えをサポート
• 検索機能をサポートキーワードに基づいて対象データを絞り込みます
• ページング機能をサポート

要件と機能を明確にした後、正式な開発段階に入りました。

Vue.js プラグインの作成

Vue.js では、プラグインはインストール メソッドを持つ JavaScript オブジェクトです。プラグインが登録されると、install メソッドが呼び出され、グローバル コンポーネントや命令の作成、インスタンス メソッドの追加などを行うことができます。

プラグインに VueTablePlugin という名前を付けました。この vue プラグインを作成しましょう。

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

さて、vue プラグインを作成したので、コンポーネント オプションを追加しましょう。

テーブルコンポーネントの記述

テーブルコンポーネントは動的なデータ表示や検索、ソート、ページングなどの機能をサポートする必要があるため、コンポーネント内で一連の処理を行う必要があります。まず、コンポーネントのオプションとプロパティをいくつか定義します:

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

プラグインでテーブル コンポーネントを作成するため、このコンポーネントを使用するときにコンポーネントを導入する必要はありません。コンポーネントを使用するには、プラグインを登録します。

テーブル コンポーネントを使用する

上記の vue プラグインとテーブル コンポーネントを作成した後、任意の vue インスタンスでコンポーネントを簡単に使用できます。具体的な操作は次のとおりです:

このコンポーネントを使用する vue インスタンスに vue-table-plugin を導入します:

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

次に、vue インスタンスにプラグインを登録します:

Vue.use(VueTablePlugin)

このようにして、簡単にvue-table コンポーネントを効果的に使用:

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

このようにして、単純な vue-table コンポーネントのカプセル化が完了し、vue プラグインを使用してそれを使用しました。実際の本番環境では、ある程度の最適化や拡張を行うことで、より柔軟で実用的なテーブルコンポーネントを開発することができます。

概要

この記事で紹介する vue プラグインとテーブル コンポーネントは暫定的なパッケージであり、実際の開発では、最終的な効果を得るために必要に応じてカスタマイズおよび拡張する必要があります。実際の開発の中で実践・拡張し、独自のコンポーネントライブラリを常に磨き、自身の開発能力を向上させることをお勧めします。

以上がVUE3 基本チュートリアル: Vue.js プラグインを使用してテーブル コンポーネントをカプセル化するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。