VUE3 basic tutorial: Use Vue.js plug-in to encapsulate table components

With the popularity of front-end and back-end separation development, front-end frameworks and tools have gradually developed into a relatively independent system. Among them, Vue.js, as the leader, has attracted the attention and use of more and more developers. This article will be based on the Vue.js 3.x version and introduce how to use the Vue.js plug-in to encapsulate a table component.

Determine requirements

Before using Vue.js to encapsulate a table component, you first need to determine the requirements and functions of the component. We can list the following requirements:

• Support dynamic input of data and generate table based on data
• Support column sorting based on table header information
• Support search function, and filter out target data based on keywords
• Support paging function

After clarifying the requirements and functions, we began to enter the formal development stage.

Writing Vue.js plug-in

In Vue.js, a plug-in is a javascript object with an install method. When the plug-in is registered, the install method will be called. In this method, we can make global components, instructions, or add instance methods, etc.

We named the plug-in VueTablePlugin, let’s create this vue plug-in.

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

Okay, now that we have created the vue plug-in, let's add component options.

Writing table component

Since the table component needs to support dynamic data display and search, sorting, paging and other functions, we need to perform a series of processing within the component. First, we can define some options and props of the component:

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

Since we write the table component in the plug-in, we do not need to introduce any components when using this component. We only need to add it to any vue instance. Register the plug-in to use the component.

Use table component

After creating our vue plug-in and table component above, we can easily use the component in any vue instance. The specific operations are as follows:

Introduce vue-table-plugin into the vue instance that uses this component:

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

Then register the plug-in in the vue instance:

Vue.use(VueTablePlugin)

In this way, you can easily Use the vue-table component effectively:

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

In this way, we have completed the encapsulation of a simple vue-table component and used it using the vue plug-in. In the actual production environment, we can optimize and expand it to a certain extent and develop a more flexible and practical table component.

Summary

The vue plug-in and table component in this article are only a preliminary package. In actual development, they need to be customized and expanded according to needs to achieve the final effect. It is recommended to practice and expand in actual development, constantly polish your own component library, and improve your own development capabilities.

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