vue3 el-table 传入字段按照汉字排序逻辑

在Vue 3中使用el-table组件来自定义排序逻辑，特别是针对含有null值的列，并且希望按照汉字排序，你可以通过自定义排序函数来实现这一需求。这里我将提供一个具体的示例和步骤说明，如何在Vue 3项目中使用Element Plus的el-table组件实现这样的功能。

步骤 1: 安装Element Plus

首先，确保你的项目中已经安装了Element Plus。如果未安装，可以通过npm或yarn来安装：

npm install element-plus --save
# 或者
yarn add element-plus

步骤 2: 在Vue组件中使用el-table

在你的Vue组件中，使用el-table和el-table-column。为了自定义排序，你可以使用sortable属性并定义一个排序方法。

步骤 3: 定义排序方法

在你的Vue组件的methods中，定义一个排序函数。这个函数将处理null值并将其排在最后，同时按照汉字进行排序。

<template>
  <el-table :data="tableData" style="width: 100%" @sort-change="handleSortChange">
    <el-table-column prop="name" label="姓名" sortable="custom"></el-table-column>
    <el-table-column prop="age" label="年龄" sortable="custom"></el-table-column>
    <!-- 其他列 -->
  </el-table>
</template>
 
<script setup>
import { ref } from 'vue';
import { ElTable, ElTableColumn } from 'element-plus';
 
const tableData = ref([
  { name: '张三', age: 28 },
  { name: '李四', age: null },
  { name: '王五', age: 25 },
  { name: null, age: 30 },
]);
 
const handleSortChange = ({ prop, order }) => {
  if (!prop) return;
  tableData.value.sort((a, b) => {
    const valA = a[prop] ?? ''; // 使用nullish coalescing operator处理null值
    const valB = b[prop] ?? ''; // 使用nullish coalescing operator处理null值
    if (order === 'ascending') {
      return valA.localeCompare(valB, 'zh-Hans'); // 使用localeCompare进行汉字排序
    } else if (order === 'descending') {
      return valB.localeCompare(valA, 'zh-Hans'); // 使用localeCompare进行汉字排序，反向比较
    }
    return 0; // 如果排序方式不是ascending或descending，则不进行排序
  });
};
</script>

1. sortable="custom"：这告诉el-table该列的排序应该由自定义函数处理。

2. 排序函数：在handleSortChange方法中，我们根据列的属性（prop）和排序方向（order）来决定如何排序。我们使用localeCompare方法来按照汉字进行排序，并且通过nullish coalescing operator (??) 来确保在比较时将null值视为空字符串（这样它们就会排在最后）。

3. null值处理：通过将null视为空字符串（即``），确保它们在排序时被视为最后。

这样，你就可以根据需要实现对含有null值的列按照汉字进行自定义排序了。