VUE3 development basics: Use Vue.js plug-in to encapsulate data table components

In Vue3 development, the data table is one of the most basic and commonly used components. In actual application development, we often need to process and display large amounts of data. The data table component can perform elegant paging, sorting, filtering and other operations on data according to the data format to meet the needs of data visualization display.

Vue.js, as a popular front-end framework, provides many practical components and APIs. However, as business needs continue to increase, there may be situations where demand cannot be met. At this time, we can use the Vue.js plug-in mechanism to develop some customized components to achieve special business needs.

Next, this article will introduce how to use the Vue.js plug-in mechanism to encapsulate a data table component and implement the following functions:

1. Display data in pages
2. Sort the table Data
3. Filter table data
4. Display data in pages

For the display of large amounts of data, rendering all data at once will cause page loading to slow down and performance to decrease. Therefore, we need to display the data in pages. Here we can use the Vue.js plug-in - "vuejs-paginate". This plug-in can split array data according to specified paging parameters, and provides data display and page switching functions.

After installing the "vuejs-paginate" plug-in, we need to initialize it. The specific configuration is as follows:

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

With the above code, you can define a custom paging component named "my-paginate" and register the "vuejs-paginate" plug-in globally. The parameter required by this paging component is an array type of data. Internally, it uses computed properties to paginate the array data instead of rendering all the data at once.

2. Sort table data

The simplest way to sort the data in the table is to sort the array data and then render it to the table. Vue3 provides a function - "computed", which can sort data, automatically monitor data changes and re-render.

Let's define a component that can sort table data and implement the switching function in ascending and descending order.

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. Filter table data

We can add a search box to the table to filter the table data based on keywords. Vue3 provides a very useful function for filtering data - "computed".

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

The above code is a simple filtering component. Through the two-way binding of the computed calculation function and v-model, the input keywords can be filtered and the filtered table display effect can be refreshed in real time.

Summary:

Through the above examples, we briefly introduced how to develop Vue3 plug-ins, and used the plug-in mechanism to encapsulate a data table component. At the same time, we also showed how to implement data processing functions such as paging, sorting, and filtering table data through computed calculation functions, v-model binding, slots, etc. This plug-in development method can make our code structure clearer and components more reusable, and it also plays a positive role in project maintenance and upgrades.

The above is the detailed content of VUE3 development basics: Use Vue.js plug-in to encapsulate data table components. For more information, please follow other related articles on the PHP Chinese website!