iview表格手动自定义排序

iView 是 Vue.js 的一款优秀的前端 UI 组件库，它提供了一个叫做 Table 的组件，支持数据的排序功能。如果你想在 iView 表格中手动自定义排序，你可以通过以下步骤操作：

1. 首先，在你的表格配置选项里，你需要指定 `sort` 字段，表示默认的排序依据。例如：

<template>
  <ivu-table :columns="columns" :data="tableData" :sortable="true">
    <!-- ... -->
  </ivu-table>
</template>

<script>
export default {
  data() {
    return {
      columns: [
        { field: 'column1', title: '列1', sorter: (a, b) => a.column1 - b.column1 } // 自定义排序规则
        // 更多列...
      ],
      tableData: [...] // 数据源
    };
  },
  methods: {
    customSort(columnField) { // 当需要手动触发排序时
      const sortedData = this.tableData.sort((a, b) => a[columnField] > b[columnField] ? 1 : -1);
      this.tableData = sortedData;
    }
  }
};
</script>

这里 `sorter` 属性是一个函数，当用户点击表头时，这个函数会被调用来进行排序。

2. 然后，在你的组件内部，可以添加事件监听器（比如 `click` 事件），在用户点击表头时触发 `customSort` 方法并传入对应字段：

<thead>
  <tr>
    <th @click="customSort('column1')">列1</th> <!-- 每个表头单元格都可以绑定此方法 -->
    <!-- 更多表头... -->
  </tr>
</thead>

当你需要改变排序顺序时，只需要调用 `customSort` 方法，并传入相应的字段名即可。