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进行排序。完成后通过父子组件的数据传递将排序后的表格数据其传递给表格组件。