ant-design-vue中table组件多列排序

antD中table组件多列排序

  • 使用前注意
  • 实现效果图
  • 实现的功能点及相关代码
    • 1. 默认按某几个字段排序
    • 2. 点击排序按钮可同时对多个字段进行排序
    • 3. 点击重置按钮可恢复默认排序状态。
  • 功能实现完整的关键代码

使用前注意

先要确认你使用的antD版本是否支持多列排序,我这里版本是3.2.15,使用的vue3 + ts。

实现效果图

在这里插入图片描述

实现的功能点及相关代码

1. 默认按某几个字段排序

在声明table列时指定需要默认排序的列属性sortOrder(ascend | descend)。 sorter 对象中的multiple字段用于指定多列排序时的优先级。数值越大,优先级越高。这意味着你可以通过为不同的列设置不同的 multiple值来实现多列排序,并且控制它们的排序优先级。

const columns = ref([{title: 'ID',dataIndex: 'id',sorter: {multiple: 1,},},{title: '设备名称',dataIndex: 'name',sortOrder: 'descend',sorter: {multiple: 2,},},{title: '产品名称',dataIndex: 'productName',},{title: '创建时间',dataIndex: 'createTime',scopedSlots: true,width: 200,sortOrder: 'descend',sorter: {multiple: 3,},},{title: '状态',dataIndex: 'state',scopedSlots: true,},{title: '说明',dataIndex: 'describe',},{title: '操作',dataIndex: 'action',fixed: 'right',width: 200,scopedSlots: true,},
]);

2. 点击排序按钮可同时对多个字段进行排序

table组件绑定的方法`@change="onChange"`/*** onChange方法实现:* 处理的都是columns这个数据源* 首先判断是单列还是多列排序:* 1. 若是多列同时排序,sorter为Array,map处理数据结构后,拿到需要排序数据与table列[columns]匹配,匹配到的给当前列字段的排序状态赋值* 2. 若是单列排序,sorter为Object,直接对匹配到的列赋值。* change方法会触发table的查询方法(给接口传的参数在table的查询方法中处理)*/
const onChange = (pagination, filters, sorter, extra) => {if (Object.prototype.toString.call(sorter) === '[object Array]') {let sorterData = sorter.map((item) => {return {field: item.field,order: item.order,};});columns.value.map((column) => {column.sortOrder = undefined;sorterData.find((item) => {if (item.field === column.dataIndex) {column.sortOrder = item.order;}});});} else {columns.value.forEach((item) => {item.sortOrder = undefined;if (item.dataIndex === sorter.field) {item.sortOrder = sorter.order;}});}
};

3. 点击重置按钮可恢复默认排序状态。

/*** 1. 查询和重置调用一个方法,在重置emit触发该方法时多传一个参数resetFlag为true* 2. 重置时将排序字段修改为需要默认排序字段,方法resetSort*/
const handleSearch = (_params: any) => {// 对要排序的数据组合为后端接口想要的格式[{name: "XXX", order: 'XXX'}]let sortsParams = columns.value.filter((item) => item.sortOrder).map((item) => ({name: item.dataIndex,order:item.sortOrder === 'descend'? 'desc': item.sortOrder === 'ascend'? 'asc': '',}));params.value = {sorts: sortsParams,};if (_params?.resetFlag) {resetSort();}
};/*** 重置方法* 重置时匹配需要重置的列,将当前列sortOrder属性置为需要默认排序值(我这里默认按创建时间和名称倒序)*/
const resetSort = () => {columns.value.forEach((column) => {column.sortOrder = undefined; // 取消所有字段排序if (column.dataIndex === 'createTime' || column.dataIndex === 'name') {column.sortOrder = 'descend';}});
};

功能实现完整的关键代码

<template><!-- 上面查询区-代码省略 --><!-- wTable为封装的table组件 --><wTableref="wTableRef":columns="columns":request="query":params="params"@change="onChange"><!-- 中间省略一些插槽代码 --><!-- 上面属性的简单介绍:columns:展示的table列request: 查询/查询时table数据请求的接口params: 查询条件参数与排序字段相关参数--></wTable>
</template>
<script setup lang="ts" name="Instance">
import { query } from '@/api/XXX';
const params = ref<Record<string, any>>({});
const columns = ref([{title: 'ID',dataIndex: 'id',sorter: {multiple: 1,},},{title: '设备名称',dataIndex: 'name',sortOrder: 'descend',sorter: {multiple: 2,},},{title: '产品名称',dataIndex: 'productName',},{title: '创建时间',dataIndex: 'createTime',scopedSlots: true,width: 200,sortOrder: 'descend',sorter: {multiple: 3,},},{title: '状态',dataIndex: 'state',scopedSlots: true,},{title: '说明',dataIndex: 'describe',},{title: '操作',dataIndex: 'action',fixed: 'right',width: 200,scopedSlots: true,},
]);const onChange = (pagination, filters, sorter, extra) => {if (Object.prototype.toString.call(sorter) === '[object Array]') {let sorterData = sorter.map((item) => {return {field: item.field,order: item.order,};});columns.value.map((column) => {column.sortOrder = undefined;sorterData.find((item) => {if (item.field === column.dataIndex) {column.sortOrder = item.order;}});});} else {columns.value.forEach((item) => {item.sortOrder = undefined;if (item.dataIndex === sorter.field) {item.sortOrder = sorter.order;}});}
};const handleSearch = (_params: any) => {let sortsParams = columns.value.filter((item) => item.sortOrder).map((item) => ({name: item.dataIndex,order:item.sortOrder === 'descend'? 'desc': item.sortOrder === 'ascend'? 'asc': '',}));params.value = {sorts: sortsParams,};if (_params?.resetFlag) {resetSort();}
};const resetSort = () => {columns.value.forEach((column) => {column.sortOrder = undefined; if (column.dataIndex === 'createTime' || column.dataIndex === 'name') {column.sortOrder = 'descend';}});
};
</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/476237.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

影视后期学习Ⅰ~

1.DV是光盘 磁带 2.序列就是我们要制作的一个视频。 打开界面显示&#xff1a; 一号面板放的是素材&#xff0c;二号面板叫源监视器面板&#xff08;它的名字需要记住&#xff09;在一号面板点击文件之后&#xff0c;进入二号面板&#xff0c;在二号面板预览没问题后&#xf…

大语言模型---Llama模型文件介绍;文件组成

文章目录 1. 概要2. 文件组成 1. 概要 在使用 LLaMA&#xff08;Large Language Model Meta AI&#xff09;权重时&#xff0c;通常会涉及到与模型权重存储和加载相关的文件。这些文件通常是以二进制格式存储的&#xff0c;具有特定的结构来支持高效的模型操作。以下以Llama-7…

elasticsearch介绍和部署

1 elasticsearch介绍 Elasticsearch 是一个分布式、高扩展、高实时的搜索与数据分析引擎。可以很方便的使大量数据具有搜索、分析和探索的能力。充分利用Elasticsearch的水平伸缩性。Elasticsearch 的实现原理主要分为以下几个步骤&#xff0c;首先用户将数据提交到Elasticsea…

ZYNQ-7020嵌入式系统学习笔记(1)——使用ARM核配置UART发送Helloworld

本工程实现调用ZYNQ-7000的内部ARM处理器&#xff0c;通过UART给电脑发送字符串。 硬件&#xff1a;正点原子领航者-7020 开发平台&#xff1a;Vivado 2018、 SDK 1 Vivado部分操作 1.1 新建工程 设置工程名&#xff0c;选择芯片型号。 1.2 添加和配置PS IP 点击IP INTEGR…

Jenkins更换主题颜色+登录页面LOGO图片

默认主题和logo图片展示 默认主题黑色和白色。 默认LOGO图片 安装插件 Login ThemeMaterial Theme 系统管理–>插件管理–>Available plugins 搜不到Login Theme是因为我提前装好了 没有外网的可以参考这篇离线安装插件 验证插件并修改主题颜色 系统管理–>A…

《操作系统》实验内容 实验二 编程实现进程(线程)同步和互斥(Python 与 PyQt5 实现)

实验内容 实验二 编程实现进程&#xff08;线程&#xff09;同步和互斥 1&#xff0e;实验的目的 &#xff08;1&#xff09;通过编写程序实现进程同步和互斥&#xff0c;使学生掌握有关进程&#xff08;线程&#xff09;同步与互斥的原理&#xff0c;以及解决进程&#xf…

【倍数问题——同余系】

题目 代码 #include <bits/stdc.h> using namespace std; const int N 1e5 10, M 1e3 10; int maxx[M][4]; void consider(int r, int x) {if(x > maxx[r][1]){maxx[r][3] maxx[r][2];maxx[r][2] maxx[r][1];maxx[r][1] x;}else if(x > maxx[r][2]){maxx[…

结合第三方模块requests,文件IO、正则表达式,通过函数封装爬虫应用采集数据

#引用BeautifulSoup更方便提取html信息&#xff1b;requests模块&#xff0c;发生http请求&#xff1b;os模块&#xff0c;文件写入import requests from bs4 import BeautifulSoup import os#当使用requests库发送请求时&#xff0c;如果不设置User - Agent&#xff0c;默认的…

Linux虚拟机网络配置

Linux固定IP 跳转到 cd /etc/sysconfig/network-scripts/ 打开文件并编辑 vim ifcfg-ens33 增加或修改选中内容 重启网卡 systemctl restart network ifconfig -a 查看ip已固定 虚拟机网络编辑器调整 子网IP进行修改&#xff0c;例如本机IP修改为10.212.197.34 此处就修改…

CSS实现实现当文本内容过长时,中间显示省略号...,两端正常展示

HTML 结构解析 文档结构: <ul class"con">: 一个无序列表&#xff0c;包含多个列表项。 每个 <li class"wrap"> 表示一个列表项&#xff0c;内部有两个 <span> 元素&#xff1a; <span class"txt">: 显示文本内容。<…

排序算法:直接插入排序,希尔排序,选择排序,快速排序,堆排序,归并排序

1.直接插入排序 基本思想&#xff1a;把待排序的数按照大小逐个插入到前面已经排序好的有序序列中&#xff0c;直到所有的都插入完为止&#xff0c;得到一个新的有序序列。 如图所示&#xff0c;当插入第i个&#xff08;i>1&#xff09;元素的时候&#xff0c;前面的arr[0]…

Qt:信号槽

一. 信号槽概念 信号槽 是 Qt 框架中一种用于对象间通信的机制 。它通过让一个对象发出信号&#xff0c;另一个对象连接到这个信号的槽上来实现通信。信号槽机制是 Qt 的核心特性之一&#xff0c;提供了一种灵活且类型安全的方式来处理事件和数据传递。 1. 信号的本质 QT中&a…

aws凭证(一)凭证存储

AWS 凭证用于验证身份&#xff0c;并授权对 DynamoDB 等等 AWS 服务的访问。配置了aws凭证后&#xff0c;才可以通过编程方式或从AWS CLI连接访问AWS资源。凭证存储在哪里呢&#xff1f;有以下几个方法&#xff1a; 一、使用文件存储 1、介绍 文件存储适用于长期和多账户配置…

Win11下载和配置VSCode(详细讲解)

配置VSCode需要的工具&#xff1a; 一、MinGW-w64 二、Visual Studio Code 一、MinGW-w64下载 1、下载 MinGW官网地址&#xff1a; Downloads - MinGW-w64 直链下载&#xff1a; 下载 mingw-w64-install.exe &#xff08;MinGW-w64 - 适用于 32 位和 64 位 Windows&#…

Python简介以及解释器安装(保姆级教学)

目录 一、Python介绍 1、简介 2、特点 3、来源 4、发展 二、Python解释器的安装 1、安装包下载 2、下载完成后&#xff0c;点击安装包进入安装流程 一、Python介绍 1、简介 Python 是一门解释型、面向对象以及动态数据类型的高级程序设计语言&#xff0c;语法简洁&…

【论文速读】| RobustKV:通过键值对驱逐防御大语言模型免受越狱攻击

基本信息 原文标题&#xff1a;ROBUSTKV: DEFENDING LARGE LANGUAGE MODELS AGAINST JAILBREAK ATTACKS VIA KV EVICTION 原文作者&#xff1a;Tanqiu Jiang, Zian Wang, Jiacheng Liang, Changjiang Li, Yuhui Wang, Ting Wang 作者单位&#xff1a;Stony Brook University…

美畅物联丨智能分析,安全管控:视频汇聚平台助力智慧工地建设

随着科技的持续发展&#xff0c;建筑行业正朝着智能化的方向迅猛迈进。智慧工地作为建筑行业智能化的关键体现形式&#xff0c;借助各类先进技术来提升工地的管理效率、安全性以及生产效益。在这个过程中&#xff0c;视频汇聚平台发挥着极为重要的作用。以畅联AIoT开放云平台为…

AI赋能:PPT制作的创意革命

在现代信息社会&#xff0c;PPT已成为沟通和展示的利器。然而&#xff0c;如何快速制作出高质量的PPT&#xff0c;却是一门学问。幸运的是&#xff0c;智能生成PPT技术的出现&#xff0c;让这一切变得轻松自如。 ai生成PPT技术&#xff0c;犹如一位无形的助手&#xff0c;帮助用…

实战 | C#中使用YoloV8和OpenCvSharp实现目标检测 (步骤 + 源码)

导 读 本文主要介绍在C#中使用YoloV8实现目标检测,并给详细步骤和代码。 详细步骤 【1】环境和依赖项。 需先安装VS2022最新版,.NetFramework8.0,然后新建项目,nuget安装 YoloSharp,YoloSharp介绍: https://github.com/dme-compunet/YoloSharp 最新版6.0.1,本文…

蓝桥杯每日真题 - 第20天

题目&#xff1a;&#xff08;机房&#xff09; 题目描述&#xff08;13届 C&CG题&#xff09; 解题思路&#xff1a; 这道题目可以看作在一个无向图中查找两点之间的最短路径。题目中的 n 台电脑和 n−1 根网线形成了一棵树&#xff0c;树是一个特殊的无向图&#xff0c…