可排序表格组件VUE代码

以下是一个可排序表格组件的VUE代码示例：

<template>
  <table>
    <thead>
      <tr>
        <th v-for="(header, index) in headers" :key="index" @click="sortBy(header.key)">
          {{ header.label }}
          <span v-if="sortOrder === 'asc' && sortByKey === header.key">▲</span>
          <span v-if="sortOrder === 'desc' && sortByKey === header.key">▼</span>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(item, index) in sortedItems" :key="index">
        <td v-for="(header, index) in headers" :key="index">{{ item[header.key] }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  props: {
    items: {
      type: Array,
      required: true
    },
    headers: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      sortByKey: null,
      sortOrder: null
    }
  },
  computed: {
    sortedItems() {
      if (!this.sortByKey) {
        return this.items
      }
      const sorted = this.items.slice().sort((a, b) => {
        const aVal = a[this.sortByKey]
        const bVal = b[this.sortByKey]
        if (typeof aVal === 'string') {
          return aVal.localeCompare(bVal)
        }
        return aVal - bVal
      })
      return this.sortOrder === 'asc' ? sorted : sorted.reverse()
    }
  },
  methods: {
    sortBy(key) {
      if (this.sortByKey === key) {
        this.sortOrder = this.sortOrder === 'asc' ? 'desc' : 'asc'
      } else {
        this.sortByKey = key
        this.sortOrder = 'asc'
      }
    }
  }
}
</script>

该组件接受两个 props：`items` 是需要展示的数据数组，`headers` 是表格头部的数组，包含每列的名称和对应数据的 key。

该组件内部使用了一个 computed 属性 `sortedItems`，它根据当前的排序方式返回一个已排序的数据数组。在表格头部每次点击时，会触发 `sortBy` 方法，该方法会根据当前的排序方式进行排序或者切换排序方式。在表格头部显示排序方式的箭头，是通过判断当前排序方式和排序 key 来控制显示的。

需要注意的是，该组件仅支持字符串和数字类型的排序，如果需要支持其他类型的排序，需要在 `sortedItems` 方法中添加自定义的比较函数。