el-table树形表格排序

在使用 `el-table` 渲染树形表格时，如果要实现排序，可以使用 `sort-method` 属性来自定义排序方法。

首先需要了解一下 `el-table` 的树形表格数据格式。树形表格的数据格式是一个数组，数组中的每个元素都是一个对象，其中包含一个 `children` 属性，用于存储子节点数组。例如：

[
  {
    name: 'node1',
    children: [
      {
        name: 'node1-1',
        children: []
      },
      {
        name: 'node1-2',
        children: [
          {
            name: 'node1-2-1',
            children: []
          }
        ]
      }
    ]
  },
  {
    name: 'node2',
    children: []
  }
]

接下来就可以在 `el-table` 中使用 `sort-method` 属性来自定义排序方法了。排序方法需要接收两个参数：`a` 和 `b`，分别表示要比较的两个节点。

示例代码：

<template>
  <el-table :data="data" :tree-props="{ children: 'children' }">
    <el-table-column prop="name" label="名称" sortable :sort-method="sortData"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      data: [
        {
          name: 'node1',
          children: [
            {
              name: 'node1-1',
              children: []
            },
            {
              name: 'node1-2',
              children: [
                {
                  name: 'node1-2-1',
                  children: []
                }
              ]
            }
          ]
        },
        {
          name: 'node2',
          children: []
        }
      ]
    }
  },
  methods: {
    sortData(a, b) {
      // 这里示例按名称排序，可以根据实际需求修改排序规则
      return a.name.localeCompare(b.name)
    }
  }
}
</script>

在上面的示例代码中，我们在 `el-table-column` 上设置了 `sortable` 属性，表示该列可以排序，然后使用 `:sort-method` 绑定了一个排序方法 `sortData`。

`sortData` 方法接收两个参数 `a` 和 `b`，这两个参数分别表示要比较的两个节点对象。在该方法中，我们示例按名称排序，使用 `localeCompare` 方法对节点名称进行排序，返回一个数值，如果返回的数值小于 0，那么 `a` 排在 `b` 前面，反之则 `b` 排在 `a` 前面。