antd vue3.2表格添加排序功能(antd表格排序)

1.如题相信很多小伙伴在使用antd vue3版本的时候,遇到过为表格增加排序的需求,下面给大家简单分享一下本人使用此功能的过程,如有不足,请大神指教.

2.其实antd vue3版本表格使用排序功能也非常简单,如图为最终实现效果,此排序支持点击升序,点击降序和点击取消排序,也可以单独使用降序或者升序功能.

 3.在columns里为需要设置的字段添加sorter: true,表格即出现上下顺序点击按钮,此时可以通过change事件监听点击的是升序还是降序,还是取消排序,然后根据点击情况,给后端传值,后端返回升序或者降序数据

<template>
<div>
<a-table :columns="columns" :data-source="data" @change="change">
</div>
<template>
<script setup>
const data=ref([])
const columns = reactive([
  {
    title: "时间",
    dataIndex: "Time",
  },
  {
    title: "编号",
    dataIndex: "Number",
    sorter: true,
    width: 80,
  },
  {
    title: "名称",
    dataIndex: "Name",
  },])
//监听点击的是升序还是降序,还是取消排序
const change= (pagination, filters, sorter) => {console.log(sorter)}
//此时打印的sorter即为点击的状态
</script>

 4.以上就是antd vue3.2实现表格排序的内容, 谢谢观看.