VUE3 開発の基本: Vue.js プラグインを使用してデータ テーブル コンポーネントをカプセル化する

Vue3 開発では、データ テーブルは最も基本的で一般的に使用されるコンポーネントの 1 つです。実際のアプリケーション開発では、大量のデータを処理して表示する必要があることがよくあります。データ テーブル コンポーネントは、データ視覚化表示のニーズを満たすために、データ形式に従ってデータに対してエレガントなページング、並べ替え、フィルタリング、およびその他の操作を実行できます。

Vue.js は、人気のあるフロントエンド フレームワークとして、多くの実用的なコンポーネントと API を提供します。ただし、ビジネスニーズが増加し続けると、需要に応えられない状況が発生する可能性があります。現時点では、Vue.js プラグイン メカニズムを使用して、特別なビジネス ニーズを達成するためにいくつかのカスタマイズされたコンポーネントを開発できます。

次に、この記事では、Vue.js プラグイン メカニズムを使用してデータ テーブル コンポーネントをカプセル化し、次の機能を実装する方法を紹介します。

1. ページにデータを表示する
2. テーブル データの並べ替え
3. テーブル データのフィルタリング
4. データをページに表示

大量のデータを表示する場合、すべてのデータを一度にレンダリングするページの読み込みが遅くなり、パフォーマンスが低下する原因となります。したがって、データをページ単位で表示する必要があります。ここでは、Vue.js プラグイン「vuejs-paginate」を使用できます。このプラグインは、指定されたページング パラメータに従って配列データを分割し、データ表示およびページ切り替え機能を提供します。

「vuejs-paginate」プラグインをインストールした後、初期化する必要があります。具体的な構成は次のとおりです。

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

上記のコードを使用すると、「my-paginate」という名前のカスタム ページング コンポーネントを定義し、「vuejs-paginate」プラグインをグローバルに登録できます。このページング コンポーネントに必要なパラメータは、配列型のデータです。内部的には、すべてのデータを一度にレンダリングするのではなく、計算されたプロパティを使用して配列データをページ分割します。

2. テーブル データの並べ替え

テーブル内のデータを並べ替える最も簡単な方法は、配列データを並べ替えてからテーブルにレンダリングすることです。 Vue3 は、データを並べ替え、データの変更を自動的に監視し、再レンダリングできる「計算」機能を提供します。

テーブルデータをソートし、昇順と降順の切り替え機能を実装できるコンポーネントを定義しましょう。

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. テーブル データのフィルタリング

テーブルに検索ボックスを追加して、キーワードに基づいてテーブル データをフィルタリングできます。 Vue3 は、データをフィルタリングするための非常に便利な機能「計算済み」を提供します。

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

上記のコードは、単純なフィルタリング コンポーネントです。計算関数と v モデルの双方向バインディングにより、入力キーワードをフィルタリングし、フィルタリングされたテーブルの表示効果をリアルタイムで更新できます。

概要:

上記の例を通じて、Vue3 プラグインの開発方法を簡単に紹介し、プラグイン メカニズムを使用してデータ テーブル コンポーネントをカプセル化しました。同時に、計算​​関数、v-model バインディング、スロットなどを使用して、テーブル データのページング、並べ替え、フィルター処理などのデータ処理関数を実装する方法も示しました。このプラグイン開発方法により、コード構造がより明確になり、コンポーネントがより再利用しやすくなり、プロジェクトのメンテナンスやアップグレードにも積極的な役割を果たします。

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