vue原生tabel怎么做排序

在Vue中，你可以使用原生的`<table>`元素来实现排序。下面是一个简单的例子，展示了如何在Vue中实现表格的排序功能：

首先，在你的Vue组件中定义一个数据属性来存储表格的数据和排序方式：

data() {
  return {
    tableData: [
      { name: 'John', age: 25 },
      { name: 'Jane', age: 30 },
      { name: 'Bob', age: 20 }
    ],
    sortKey: '',
    sortDesc: false
  };
}

然后，你可以在模板中使用`v-for`指令来渲染表格，并添加点击事件来触发排序：

<table>
  <thead>
    <tr>
      <th @click="sortBy('name')">Name</th>
      <th @click="sortBy('age')">Age</th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="item in sortedData" :key="item.name">
      <td>{{ item.name }}</td>
      <td>{{ item.age }}</td>
    </tr>
  </tbody>
</table>

注意到上面模板中的`@click`事件绑定了一个`sortBy`方法，该方法根据传入的排序字段对表格数据进行排序。在`sortBy`方法中，我们可以根据当前排序字段和排序方式来更新数据：

methods: {
  sortBy(key) {
    if (this.sortKey === key) {
      this.sortDesc = !this.sortDesc;
    } else {
      this.sortKey = key;
      this.sortDesc = false;
    }

    this.tableData.sort((a, b) => {
      const modifier = this.sortDesc ? -1 : 1;
      if (a[key] < b[key]) return -1 * modifier;
      if (a[key] > b[key]) return 1 * modifier;
      return 0;
    });
  }
},
computed: {
  sortedData() {
    return this.tableData;
  }
}

在上面的代码中，`sortBy`方法会切换排序字段和排序方式，然后使用`Array.sort`方法对表格数据进行排序。最后，在模板中使用计算属性`sortedData`来获取已排序的数据。

这样，你就可以实现基本的表格排序功能了。当点击表头的列时，表格数据会根据选定的字段进行排序。