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 或空字符串的值。这确保了你的表格能够按照预期的方式显示和排序数据。