vue的table表格组件的封装方式

2023年6月10日下午1:28 • JavaScript

下面我来详细讲解 "Vue的Table表格组件的封装方式"。

一、前言

Vue的Table表格组件在许多Web应用程序中都有着广泛的应用，Table组件可以方便地呈现大量的数据，并提供强大的过滤、搜索、分页等功能，十分受 Web 开发者的喜欢。因此，本文将为大家分享一种Vue的Table表格组件的封装方式。

二、封装方式

1、基本思路

Vue的Table表格组件主要有四个部分组成：表头(header)、表体(body)、表尾(footer)和分页(page)等，因此，我们可以将这四个部分组成的代码段封装成一个Vue子组件，供外部使用。

2、组件代码

下面是一个简单的代码片段，实现了Vue的Table表格组件的封装：

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th v-for="column in columns">{{ column }}</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(data, index) in tableData" :key="index">
          <td v-for="(value, key) in data">{{ value }}</td>
        </tr>
      </tbody>
    </table>
    <div v-if="isShowPage">
      <!-- 分页组件 -->
    </div>
  </div>
</template>

<script>
export default {
  props: {
    columns: {
      type: Array,
      default: () => [],
    },
    tableData: {
      type: Array,
      default: () => [],
    },
    isShowPage: {
      type: Boolean,
      default: false,
    },
  },
}
</script>

上述代码实现了一个最基本的Vue的Table表格组件，包括表头(header)、表体(body)和分页(page)，共有三个 props：

columns：表示表格每个列的标题，是一个字符串数组。
tableData：表示表格的数据，是一个数组。
isShowPage：是否显示分页组件，是一个 Boolean 类型。

这个代码片段可以通过在 父组件 中传递 props 参数来生成可用的 Table 组件。例如：

<template>
  <div>
    <table-component
      :columns="columns"
      :tableData="tableData"
      :isShowPage="true"
    />
  </div>
</template>

<script>
import TableComponent from './components/TableComponent.vue'

export default {
  data() {
    return {
      columns: ['ID', 'Name', 'Age', 'Gender'],
      tableData: [
        { id: 1, name: 'Tom', age: 20, gender: 'M' },
        { id: 2, name: 'Lucy', age: 21, gender: 'F' },
        { id: 3, name: 'Mike', age: 22, gender: 'M' },
        { id: 4, name: 'Lisa', age: 23, gender: 'F' },
      ],
    }
  },
  components: {
    TableComponent,
  },
}
</script>

上述代码在父组件中引入TableComponent组件，并传入相应的props参数，以生成一个Table组件的实例。

3、高级用法

在实际使用Vue的Table表格组件的过程中，我们还可以根据不同的需求对其进行扩展，例如，自定义过滤器、排序、展开子表格等。

下面是一个示例代码片段，扩展了 Table 组件的自定义过滤器以及排序功能：

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th v-for="(column, index) in columns" :key="index">
            <span
              @click="handleSort(index)"
              :class="{ active: sortColumn === index }"
            >
              {{ column.title }}
            </span>
            <input class="filter" type="text" v-model="column.filterText" />
          </th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in filteredData" :key="index">
          <td v-for="(column, k) in columns" :key="k">
            {{ item[column.key] }}
          </td>
        </tr>
        <tr v-if="!filteredData.length">
          <td :colspan="columns.length" class="text-center">
            <strong>No results found.</strong>
          </td>
        </tr>
      </tbody>
    </table>
    <div v-if="isShowPage">
      <!-- 分页组件 -->
    </div>
  </div>
</template>

<script>
export default {
  props: {
    columns: {
      type: Array,
      default: () => [],
    },
    tableData: {
      type: Array,
      default: () => [],
    },
    isShowPage: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      sortColumn: -1,
    }
  },
  computed: {
    filteredData() {
      let data = [...this.tableData]
      this.columns.forEach((column) => {
        if (column.filterText) {
          data = data.filter((item) => {
            return (
              item[column.key]
                .toString()
                .toLowerCase()
                .indexOf(column.filterText.toLowerCase()) >= 0
            )
          })
        }
      })
      if (this.sortColumn >= 0) {
        data.sort((a, b) => {
          const col = this.columns[this.sortColumn]
          let d1 = a[col.key]
          let d2 = b[col.key]
          if (col.sortType === 'number') {
            d1 = Number.parseFloat(d1)
            d2 = Number.parseFloat(d2)
          }
          if (col.sortType === 'date') {
            d1 = new Date(d1)
            d2 = new Date(d2)
          }
          if (d1 < d2) {
            return col.sortAsc ? -1 : 1
          }
          if (d1 > d2) {
            return col.sortAsc ? 1 : -1
          }
          return 0
        })
      }
      return data
    },
  },
  methods: {
    handleSort(index) {
      if (index === this.sortColumn) {
        this.columns[index].sortAsc = !this.columns[index].sortAsc
      } else {
        this.columns.forEach((column) => (column.sortAsc = true))
        this.sortColumn = index
      }
    },
  },
}
</script>

上述代码通过传递一个设置了自定义过滤器和排序的columns数组和tableData数组即可以生成扩展的Table组件，通过封装高级用法，使得我们的Table组件可以更加具有可扩展性。