Vue.js实现可排序的表格组件功能示例

当我们开发一些管理性质的网站时，表格是非常基本的需求。常见的表格功能有分页、排序、搜索等，其中销售额这类的表格，排序功能尤其重要。

Vue.js是一种渐进式JavaScript框架，具有轻量级、高效率、易上手等优点，因此成为了前端开发中的热门工具。下面介绍如何通过Vue.js实现可排序的表格组件功能示例。

第一步：拆分组件

首先将一个整体的表格组件拆分成多个子组件，每个子组件负责不同的部分，例如表头、表体、分页等。这样可以方便开发和维护。表头组件是表头功能实现的核心组件，其代码如下：

<template>
  <tr>
    <th v-for="key in columns"
        v-bind:class="{ active: sortColumn === key }"
        @click="sortBy(key)">
      {{ key }}
      <span v-if="sortColumn === key"
            v-bind:class="sortType > 0 ? 'arrow-down' : 'arrow-up'"></span>
    </th>
  </tr>
</template>

<script>
export default {
  props: {
    columns: Array,
    sortColumn: String,
    sortType: Number
  },
  methods: {
    sortBy: function(key) {
      this.$emit('sort-by', key);
    }
  },
};
</script>

<style>
  .arrow-up {
    border-color: #000 transparent transparent;
  }
  .arrow-down {
    border-color: transparent transparent #000;
  }
  .active {
    font-weight: bold;
  }
</style>

组件内部分为模板块和一个methods块。模板块负责展示表头，实现了表头的交互效果，包括高亮、上升下降的箭头等功能。methods块实现了一个sortBy方法，用来响应头部的点击事件。通过this.$emit()将事件发射出去，父组件监听到子组件的点击事件，从而更新表格数据。

第二步：排序方法实现

表头组件中的sortBy方法只是将点击的表头名称通过emit()抛出，由父组件对该名称进行处理。主要是对表格数据进行排序。在父组件中实现以下排序方法：

sortBy: function(key) {
  if (this.sortType === 0) {
    this.sortType = 1;
  } else if (this.sortColumn === key) {
    this.sortType *= -1;
  } else {
    this.sortType = 1;
  }
  this.sortColumn = key;

  const order = this.sortType < 0 ? -1 : 1;

  this.items.sort((a, b) => {
    a = a[key];
    b = b[key];

    if (a === b) {
      return 0;
    } else {
      return a > b ? order : -order;
    }
  });
}

sort方法接收一个用于排序的回调函数，该函数接收两个参数，如果返回值小于0，表示a在b之前，如果返回值等于0，表示a和b的顺序不变，如果返回值大于0，表示b在a之前。该回调函数的实现基于所点击的排序键值，和一个排序标志——$sortType的变量。

然后依据该变量来升降排序，最后对items数组中的对象按照column进行排序。完成后通过父子组件的数据传递将排序后的表格数据其传递给表格组件。

示例1：Vue.js实现可排序的表格组件功能

完整的示例代码请参考 SortableTable.vue组件

示例2：Vue.js使用专业UI框架Element实现可排序的表格

除了自主开发组件实现可排序的表格之外，还可以使用专业的UI框架例如Element UI来实现。Element UI中提供了非常丰富的表格组件，我们只需要配置一下就能轻松实现可排序表格的功能。其实现过程大致如下：

1. 引入Element UI及其样式文件
2. 在Vue中引入table组件
3. 设定表格的columns属性，即表格的列名，以及其属性是sortabe
4. 设定表格的data属性，即表格的数据
5. 通过el-table-column组件，向表头中添加上升下降箭头，并在该自定义的组件内实现升降序排列方法

该方法优点在于轻松简单，不需要手动编写排序方法，只需要几步操作即可实现可排序的表格组件。示例代码可参考Vue.js + Element可排序表格示例