在列中設(shè)置 sortable 屬性即可實(shí)現(xiàn)以該列為基準(zhǔn)的排序， 接受一個(gè) Boolean，默認(rèn)為 false。 可以通過 Table 的 default-sort 屬性設(shè)置默認(rèn)的排序列和排序順序。 可以使用 sort-method 或者 sort-by 使用自定義的排序規(guī)則。 如果需要后端排序，需將 sortable 設(shè)置為 custom，同時(shí)在 Table 上監(jiān)聽 sort-change 事件， 在事件回調(diào)中可以獲取當(dāng)前排序的字段名和排序順序，從而向接口請求排序后的表格數(shù)據(jù)。 在本例中，我們還使用了 formatter 屬性，它用于格式化指定列的值， 接受一個(gè) Function，會(huì)傳入兩個(gè)參數(shù)：row 和 column， 可以根據(jù)自己的需求進(jìn)行處理

在使用table的默認(rèn)排序時(shí)不是很靈活了，官方給了一個(gè)更靈活的辦法sort-by，如何使用呢？接下來舉個(gè)例子。

有些數(shù)據(jù)不需要進(jìn)行排序

<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>

都看到這里了捎帶腳重溫一下數(shù)組的排序方法 sort()吧。

sort() 方法用原地算法對數(shù)組的元素進(jìn)行排序，并返回?cái)?shù)組。默認(rèn)排序順序是在將元素轉(zhuǎn)換為字符串，然后比較它們的 UTF-16 代碼單元值序列時(shí)構(gòu)建的

參數(shù)

• compareFn 可選

  用來指定按某種順序進(jìn)行排列的函數(shù)。如果省略，元素按照轉(zhuǎn)換為的字符串的各個(gè)字符的 Unicode 位點(diǎn)進(jìn)行排序。
  a第一個(gè)用于比較的元素。
  b第二個(gè)用于比較的元素。

如果指明了 compareFn ，那么數(shù)組會(huì)按照調(diào)用該函數(shù)的返回值排序。即 a 和 b 是兩個(gè)將要被比較的元素：

• 如果 compareFn(a, b) 大于 0，b 會(huì)被排列到 a 之前。
• 如果 compareFn(a, b) 小于 0，那么 a 會(huì)被排列到 b 之前；
• 如果 compareFn(a, b) 等于 0，a 和 b 的相對位置不變。備注：ECMAScript 標(biāo)準(zhǔn)并不保證這一行為，而且也不是所有瀏覽器都會(huì)遵守（例如 Mozilla 在 2003 年之前的版本）；
• compareFn(a, b) 必須總是對相同的輸入返回相同的比較結(jié)果，否則排序的結(jié)果將是不確定的。