封装Vue Element的table表格组件的示例详解

首先介绍一下Vue Element的table表格组件，它是基于Vue.js的易用的表格组件，能够快速方便地创建数据表格，支持分页、排序和多选等功能，并且形象直观地展示数据。

下面我们主要是介绍一下如何进行封装，以便更好地使用。

第一步，建立自己的table组件，将其封装进Vue组件中。

<template>
  <div>
    <el-table :data="data" :height="height" :stripe="stripe" :border="border"
      :fit="fit" :show-header="showHeader" :highlight-current-row="highlightCurrentRow"
      :current-row-key="currentRowKey" :row-class-name="rowClassName"
      @select="handleSelect" @select-all="handleSelectAll">
      <slot></slot>
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'custom-table',
  props: {
    data: Array,
    height: [String, Number],
    stripe: {
      type: Boolean,
      default: true,
    },
    border: {
      type: Boolean,
      default: true,
    },
    fit: {
      type: Boolean,
      default: true,
    },
    showHeader: {
      type: Boolean,
      default: true,
    },
    highlightCurrentRow: {
      type: Boolean,
      default: false,
    },
    currentRowKey: [String, Number],
    rowClassName: [String, Function],
  },
  methods: {
    handleSelect(selection, row) {
      if (this.$listeners['select']) {
        this.$emit('select', selection, row);
      }
    },
    handleSelectAll(selection) {
      if (this.$listeners['select-all']) {
        this.$emit('select-all', selection);
      }
    },
  },
};
</script>

这是基本的封装组件的外部代码，这里有一个自定义table组件，将其封装进Vue组件中。其中有props来支持所需的参数。

接下来，我们可以使用刚刚封装的组件来实现一些具体的功能。这里我们演示两个示例。

示例1：实现表格排序功能

我们实例化一个自定义table组件，并实现了表格排序功能。在data中定义一个数组，然后在created函数中对数组进行排序。

<template>
  <div>
    <custom-table :data="tableData" height="400">
      <el-table-column prop="name" label="名称"></el-table-column>
      <el-table-column prop="age" label="年龄" sortable></el-table-column>
      <el-table-column prop="gender" label="性别"></el-table-column>
    </custom-table>
  </div>
</template>

<script>
import customTable from '@/views/components/custom-table';

export default {
  name: 'sort-table',
  components: {
    customTable,
  },
  data() {
    return {
      tableData: [
        {
          name: '张三',
          age: 32,
          gender: '男',
        },
        {
          name: '李四',
          age: 25,
          gender: '女',
        },
        {
          name: '王五',
          age: 19,
          gender: '男',
        },
        {
          name: '赵六',
          age: 45,
          gender: '男',
        },
      ],
    };
  },
  created() {
    this.tableData.sort((a, b) => a.age - b.age);
  },
};
</script>

在这个示例中，我们定义了一个表格，其中有三列分别为“名称”、“年龄”和“性别”。我们可以在“年龄”列中设置sortable属性为true，也就是可以排序，这样就可以使用created函数对该数组进行排序。

示例2：实现表格分页功能

我们实例化一个自定义table组件，并实现了分页功能。在data中定义一个数组，然后在分页时通过methods函数进行分页处理。

<template>
  <div>
    <custom-table :data="tableData" :height="byPage ? (pageSize * 45 + 40 + 'px') : 'auto'">
      <el-table-column prop="name" label="名称"></el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
      <el-table-column prop="gender" label="性别"></el-table-column>
    </custom-table>
    <el-pagination :page-size="pageSize" :total="tableData.length" @current-change="currentChange"
      layout="prev, pager, next, jumper"></el-pagination>
  </div>
</template>

<script>
import customTable from '@/views/components/custom-table';

export default {
  name: 'pagination-table',
  components: {
    customTable,
  },
  data() {
    return {
      tableData: [
        {
          name: '张三',
          age: 32,
          gender: '男',
        },
        {
          name: '李四',
          age: 25,
          gender: '女',
        },
        {
          name: '王五',
          age: 19,
          gender: '男',
        },
        {
          name: '赵六',
          age: 45,
          gender: '男',
        },
        {
          name: '钱七',
          age: 25,
          gender: '女',
        },
        {
          name: '周八',
          age: 37,
          gender: '女',
        },
        {
          name: '吴九',
          age: 42,
          gender: '男',
        },
        {
          name: '郑十',
          age: 23,
          gender: '女',
        },
      ],
      currentPage: 1,
      pageSize: 3,
      byPage: true,
    };
  },
  methods: {
    currentChange(cPage) {
      this.currentPage = cPage;
    },
  },
  computed: {
    tableDataWithPage() {
      if (this.byPage) {
        const start = (this.currentPage - 1) * this.pageSize;
        const end = start + this.pageSize;
        return this.tableData.slice(start, end);
      }
      return this.tableData;
    },
  },
};
</script>

在这个示例中，我们定义了一个表格，使用了自定义的table组件，并且设置了分页功能。在el-pagination组件中，我们设置了total为tableData的长度，pageSize为每一页的数据量，然后定义一个computed函数进行计算。如果byPage被设为true，则表示启用了分页功能，根据当前的currentPage和pageSize来计算出要显示的数据。如果byPage为false，则表示不启用分页功能，直接把tableData赋值给tableDataWithPage即可。