vue3 el-table 列增加 自定义排序逻辑

在 Vue 3 中使用 Element Plus 的 <el-table> 组件时,如果你想增加自定义排序逻辑,可以通过以下几个步骤实现:

1. 使用 default-sort 属性

首先,你可以在 <el-table> 组件上使用 default-sort 属性来指定默认的排序规则。例如,如果你想默认按照某一列升序排序,可以这样做:

复制代码
<template>
  <el-table :data="tableData" default-sort="{prop: 'date', order: 'ascending'}">
    <el-table-column prop="date" label="日期" sortable />
    <el-table-column prop="name" label="姓名" />
    <el-table-column prop="address" label="地址" />
  </el-table>
</template>

2. 使用 sort-methodsort-comparator 属性

对于自定义排序逻辑,你可以使用 sort-methodsort-comparator 属性。sort-method 适用于简单的比较函数,而 sort-comparator 适用于更复杂的排序逻辑,比如异步排序。

使用 sort-method
复制代码
<template>
  <el-table :data="tableData">
    <el-table-column prop="date" label="日期" sortable :sort-method="dateSortMethod" />
    <el-table-column prop="name" label="姓名" />
    <el-table-column prop="address" label="地址" />
  </el-table>
</template>
 
<script setup>
import { ref } from 'vue';
 
const tableData = ref([...]); // 你的数据数组
 
const dateSortMethod = (a, b) => {
  return new Date(a) - new Date(b); // 示例:按日期字符串排序
};
</script>
使用 sort-comparator(适用于 Element Plus)
复制代码
<template>
  <el-table :data="tableData">
    <el-table-column prop="date" label="日期" sortable :sort-comparator="dateComparator" />
    <el-table-column prop="name" label="姓名" />
    <el-table-column prop="address" label="地址" />
  </el-table>
</template>
 
<script setup>
import { ref } from 'vue';
 
const tableData = ref([...]); // 你的数据数组
 
const dateComparator = (a, b) => {
  return new Date(a.date) - new Date(b.date); // 按日期对象排序,确保数据对象中有 date 属性
};
</script>

3. 使用 sort-change 事件自定义排序行为(动态排序)

如果你需要在用户点击列头进行排序时执行更复杂的逻辑,可以使用 sort-change 事件。这个事件会在列头排序变化时触发,你可以在这个事件处理函数中实现自定义的排序逻辑。

复制代码
<template>
  <el-table :data="tableData" @sort-change="handleSortChange">
    <el-table-column prop="date" label="日期" sortable />
    <el-table-column prop="name" label="姓名" />
    <el-table-column prop="address" label="地址" />
  </el-table>
</template>
 
<script setup>
import { ref } from 'vue';
 
const tableData = ref([...]); // 你的数据数组
const handleSortChange = ({ column, prop, order }) => {
  if (prop === 'date') {
    // 根据日期进行排序的自定义逻辑,例如使用 lodash 的 sortBy 或其他方法进行排序。
    // 这里仅作为示例,实际应根据需求调整排序逻辑。
    if (order === 'ascending') {
      tableData.value.sort((a, b) => new Date(a[prop]) - new Date(b[prop]));
    } else if (order === 'descending') {
      tableData.value.sort((a, b) => new Date(b[prop]) - new Date(a[prop]));
    } else { // order 为 null 表示取消排序,重置数据等逻辑可在此处理。
      // 重置数据或按其他逻辑处理。
    }
  }
};
</script>
相关推荐
Spider_Man10 分钟前
从 "字符拼图" 到 "文字魔术":动态规划玩转字符串变形术
javascript·算法·leetcode
前端搬砖仔噜啦噜啦嘞11 分钟前
从0到1开发一款vscode插件
前端·javascript
Mintopia28 分钟前
3D Quickhull 算法:用可见性与冲突图搭建空间凸壳
前端·javascript·计算机图形学
白日依山尽yy28 分钟前
Vue、微信小程序、Uniapp 面试题整理最新整合版
vue.js·微信小程序·uni-app
Mintopia28 分钟前
Three.js 三维数据交互与高并发优化:从点云到地图的底层修炼
前端·javascript·three.js
BillKu1 小时前
Vue3数组去重方法总结
前端·javascript·vue.js
GDAL1 小时前
Object.freeze() 深度解析:不可变性的实现与实战指南
javascript·freeze
江城开朗的豌豆1 小时前
Vue+JSX真香现场:告别模板语法,解锁新姿势!
前端·javascript·vue.js
摸鱼仙人~1 小时前
Vue.js 指令系统完全指南:深入理解 v- 指令
前端·javascript·vue.js
江城开朗的豌豆1 小时前
Vue列表渲染的坑:为什么不能用index当key?血泪教训总结!
前端·javascript·vue.js