vue3 el-table 列汉字 排序时排除 null 或空字符串的值

在 Vue 3 中使用 Element Plus 的 <el-table> 组件时，如果你想实现一个自定义的排序逻辑，尤其是针对汉字的排序，并且在排序时排除 null 或空字符串的值，你可以通过自定义 sort-method 属性来实现。

步骤 1: 安装 Element Plus

确保你已经安装了 Element Plus。如果还没有安装，可以通过 npm 或 yarn 来安装：

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

步骤 2: 在组件中引入和注册 Element Plus

在你的 Vue 3 组件中引入 <el-table> 和必要的 CSS：

import { ElTable, ElTableColumn } from 'element-plus';
import 'element-plus/dist/index.css';
 
export default {
  components: {
    [ElTable.name]: ElTable,
    [ElTableColumn.name]: ElTableColumn,
  },
  // 其他组件选项...
};

步骤 3: 定义自定义排序方法

你可以在组件的 methods 中定义一个排序方法，该方法将处理汉字排序并排除 null 或空字符串：

methods: {
  customSort(a, b) {
    if (a == null || a === '') return 1; // a 应该排在 b 后面或不被考虑
    if (b == null || b === '') return -1; // b 应该排在 a 后面或不被考虑
    return a.localeCompare(b, 'zh-Hans-CN'); // 使用 localeCompare 进行汉字排序
  }
}

步骤 4: 在 <el-table-column> 中使用 sort-method

在 <el-table-column> 的 sort-method 属性中使用你的自定义排序方法：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="name" label="姓名" :sort-method="customSort"></el-table-column>
    <!-- 其他列 -->
  </el-table>
</template>

步骤 5: 确保数据正确处理

确保你的 tableData 中没有 null 或空字符串，或者在数据加载时进行预处理：

data() {
  return {
    tableData: [
      { name: '张三', age: 28 }, // 确保没有 null 或空字符串的示例数据
      { name: '李四', age: 22 },
      // 其他数据...
    ],
  };
},

这样设置后，当用户点击列头进行排序时，你的自定义排序方法将会被触发，实现汉字的排序，并且自动忽略任何 null 或空字符串的值。这确保了你的表格能够按照预期的方式显示和排序数据。