element-ui组件Table排序(sort-by),某些数据无需排序

在列中设置 sortable 属性即可实现以该列为基准的排序， 接受一个 Boolean，默认为 false。 可以通过 Table 的 default-sort 属性设置默认的排序列和排序顺序。 可以使用 sort-method 或者 sort-by 使用自定义的排序规则。 如果需要后端排序，需将 sortable 设置为 custom，同时在 Table 上监听 sort-change 事件， 在事件回调中可以获取当前排序的字段名和排序顺序，从而向接口请求排序后的表格数据。 在本例中，我们还使用了 formatter 属性，它用于格式化指定列的值， 接受一个 Function，会传入两个参数：row 和 column， 可以根据自己的需求进行处理

在使用table的默认排序时不是很灵活了，官方给了一个更灵活的办法sort-by，如何使用呢？接下来举个例子。

有些数据不需要进行排序

<template>
  <el-table
    ref="tableEl"
    :data="tableData"
    style="width: 100%"
    @sort-change="sortMethods"
  >
    <el-table-column prop="date" label="Date" sortable width="180" />
    <el-table-column prop="name" label="Name" width="180" />
    <el-table-column prop="address" label="Address"  />
  </el-table>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const tableEl = ref('')

let tableData: User[] = ref([
  {
    date: '5',
    name: 'Tom1',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '3',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '4',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '3',
    name: '不排序',
    address: 'No. 189, Grove St, Los Angeles',
  },
])

const sortMethods = (_column) => {
  const { order, prop } = _column

  const list = []
  tableData.value.forEach((_item) => {
    list.push(_item)
  })

  if (order === 'ascending') {
    tableData.value = list.sort((a, b) => {
      let aVal = a[prop]
      let bVal = b[prop]
      if (a.name === '不排序' || b.name === '不排序') {
        return 1
      }

      return aVal -bVal
    })
  } else if (order === 'descending') {
    tableData.value = list.sort((a, b) => {
      let aVal = a[prop]
      let bVal = b[prop]
      if (a.name === '不排序' || b.name === '不排序') {
        return 1
      }

      return bVal - aVal
    })
  } else {
    if (tableEl.value) {
      tableEl.value.clearSort()
    }
  }
}
</script>

都看到这里了捎带脚重温一下数组的排序方法 sort()吧。

sort() 方法用原地算法对数组的元素进行排序，并返回数组。默认排序顺序是在将元素转换为字符串，然后比较它们的 UTF-16 代码单元值序列时构建的

参数

• compareFn 可选

  用来指定按某种顺序进行排列的函数。如果省略，元素按照转换为的字符串的各个字符的 Unicode 位点进行排序。
  a第一个用于比较的元素。
  b第二个用于比较的元素。

如果指明了 compareFn ，那么数组会按照调用该函数的返回值排序。即 a 和 b 是两个将要被比较的元素：

• 如果 compareFn(a, b) 大于 0，b 会被排列到 a 之前。
• 如果 compareFn(a, b) 小于 0，那么 a 会被排列到 b 之前；
• 如果 compareFn(a, b) 等于 0，a 和 b 的相对位置不变。备注：ECMAScript 标准并不保证这一行为，而且也不是所有浏览器都会遵守（例如 Mozilla 在 2003 年之前的版本）；
• compareFn(a, b) 必须总是对相同的输入返回相同的比较结果，否则排序的结果将是不确定的。

compareFn(a, b) 返回值	排序顺序
> 0	a 在 b 后
< 0	a 在 b 前
=== 0	保持 a 和 b 的顺序