Ant Design Vue「表格组件」排序与过滤的完整代码

<template>
  <div id="container" class="text-white text-sm bg-primary-300 min-h-screen pb-4">
    <Header/>


    <div class="flex items-center justify-center">


      <div class="w-full px-2" style="max-width:1440px;">


        <div id="main" class="bg-primary-300 p-6 text-black">


          <!-- 订单 -->
          <div class="rounded bg-white mx-4 my-4 py-6 ">
            <div class="px-6">
              <h1 class="text-lg font-semibold">我的订单</h1>
            </div>
          </div>


          <div id="orders_all" class="rounded bg-white mx-4 my-4 py-6">


            <!-- 头部标签组 与 输入框 -->
            <a-row class="flex items-center justify-center">
              <a-space>


                <!-- 标签组 -->
                <div>
                  <a-tag color="purple" @click="TagClick('all')">
                    <a href="/orders">
                      All  「全部」
                    </a>
                    <!-- All  「全部」 -->
                  </a-tag>
                  <a-tag color="cyan" @click="TagClick('paying')">
                    <a href="/orders/?pay_status=paying">
                      Paying  「支付中」
                    </a>
                    <!--  Paying  「支付中」  -->
                  </a-tag>
                  <a-tag color="green" @click="TagClick('finish')">
                    <a href="/orders/?pay_status=trade_success">
                      FINISH  「完结」
                    </a>
                    <!-- FINISH  「完结」 -->
                  </a-tag>
                </div>


                <!--输入框 -->
                <div class="relative shrink">
                  <form>
                    <input v-model.trim="order_sn"  type="text" name="order_sn"  class="
                      outline-0
                      h-9
                      rounded
                      border
                      border-gray-600
                      placeholder-gray-400
                      w-64
                      px-2
                      py-1
                      max-w-[180px]
                  "  placeholder="输入订单编号" >
                    <div class="
                      absolute
                      top-0
                      right-0
                      flex
                      items-center
                      h-full
                  ">
                      <div class=" rounded text-xs text-gray-400 px-2 mr-2">
                        <button v-on:click.prevent="searchOrders">
                          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" >
                          </svg>
                        </button>
                      </div>
                    </div>
                  </form>
                </div>


              </a-space>
            </a-row>


            <!-- 空行 -->
            <br/>


            <!-- 表格组件 -->
            <a-table
                :columns="columns"
                :data-source="data"
            >
              <template #bodyCell="{ column, record }">


                <!-- 支付状态 -->
                <template v-if="column.key === 'pay_status'">
                  <span>
                    <a-tag v-if="record.pay_status === 'PAYING'" color="orange">
                      支付中
                    </a-tag>
                    <a-tag v-if="record.pay_status === 'TRADE_SUCCESS'" color="green">
                      支付成功
                    </a-tag>
                  </span>
                </template>


                <!-- 操作 -->
                <template v-if="column.key === 'action'">
                  <a-button v-if="record.pay_status === 'PAYING'">支付</a-button>
                </template>


              </template>
            </a-table>


          </div>


        </div>


      </div>


    </div>


    <Footer/>
  </div>
</template>


<script setup lang="ts">
// ================================= 引入包


// 项目：头与底部
import Header from "@/components/layout/Header.vue"
import Footer from "@/components/layout/Footer.vue"


// 消息通知
import showMessage from "@/utils/message.js";


// 处理表格数据与渲染
import axios from 'axios'
import {useRequest} from 'vue-request'
import {watch} from 'vue';


// 路由或地址相关
import {useRoute} from "vue-router";
const route = useRoute()


import router from "@/router/index.ts";
import {ref} from "vue";


// ================================= 获取数据
const getOrders = () => {
  // 最终返回的变量
  let data_return = ''


  // 地址
  let url = '/api/order/'


  // 根据 URL 地址的状态进行动态设定
  const page:any = Number(route.query.page)
  const pay_status:any = route.query.pay_status
  const order_sn:any = route.query.order_sn


  const params = new URLSearchParams()


  if (page) {
    params.append('page', page)
  }
  if (pay_status) {
    params.append('pay_status', pay_status)
  }
  if (order_sn) {
    params.append('order_sn', order_sn)
  }


  url = url + '?' + params.toString()


  // AXIOS 请求API接口
  const orders = axios.get(url).then(
      response => {
        // 最终返回数据
        let return_data = []


        // 原始队列
        let origin_orders =  response.data.results


        for (var key in origin_orders) {


          let origin_orders_item = origin_orders[key]
          let origin_orders_item_card = origin_orders_item['card']


          // 处理原始字典
          delete origin_orders_item.card


          return_data.push(Object.assign(
              {},
              origin_orders_item,
              origin_orders_item_card,
          ))


          // 显示
          // console.log("@@@@@@@@@@ 项目")
          // console.log(origin_orders_item)
          // console.log("--- 项目【Card】")
          // console.log(origin_orders_item_card)
        }


        return return_data
      }
  )


  // data_return = handleNestedDict(orders)
  data_return = orders


  // 返回阶段
  return data_return
}


// ================================= 通过 vue-request 请求
// vue-request 官方文档 https://www.attojs.com/api/#return-values
const {
  data,
  run,
} = useRequest(getOrders)


// ================================= 表格组件相关
const columns = [
  {
    title: '订单编号',
    dataIndex: 'order_sn',
    key: 'order_sn',
    sorter: (a, b) => {
      // 按名称的字母顺序排序
      return a.order_sn.localeCompare(b.order_sn)
    },
  },
  {
    title: '支付状态',
    dataIndex: 'pay_status',
    key: 'pay_status',
    filters: [
      {text:"已支付", value:"TRADE_SUCCESS"},
      {text:"支付中", value:"PAYING"},
    ],
    onFilter: (value, record) => record.pay_status.indexOf(value) === 0,
  },
  {
    title: '支付金额',
    dataIndex: 'order_mount',
    key: 'order_mount',
    // 排序「数字」
    sorter: (a, b) => a.order_mount - b.order_mount,
    sortDirections: ['ascend','descend',],
  },
  {
    title: '创建时间',
    dataIndex: 'created_at',
    sorter: (a, b) => {


      // 按时间排序「1」
      // const dateA = new Date(a.created_at).getTime()
      // const dateB = new Date(b.created_at).getTime()
      //
      // return dateA - dateB


      // 按时间排序「2」
      return Date.parse(a.created_at) - Date.parse(b.created_at)
    },
  },
  {
    title: '会员卡',
    dataIndex: "card_name",
    key: "card_name",
    filters: [
      {text:"黄金VIP", value:"黄金VIP"},
      {text:"白金VIP", value:"白金VIP"},
      {text:"星钻VIP", value:"星钻VIP"},
    ],
    onFilter: (value, record) => record.card_name.indexOf(value) === 0,
  },
  {
    title: '会员有效期（天）',
    dataIndex: 'duration',
    key: 'duration'
  },
  {
    title: '操作',
    key: 'action',
    // 固定位置
    // fixed: 'right',
  },
]


// ================================= 当表格数据变化时触发


// const handleTableChange: TableProps['onChange'] = (
//     filters: any,
//     sorter: any,
// ) => {
//   run({
//     sortField: sorter.field,
//     sortOrder: sorter.order,
//     ...filters,
//   })
// }


// ================================= 「标签组」相关


function TagClick(message) {


  if (message === 'all') {
    showMessage(message, "info")
    run({
      pay_status: ''
    })
  }
  if (message === 'paying') {
    showMessage(message, "info")
    run({
      pay_status: 'paying'
    })
  }
  if (message === 'finish') {
    showMessage(message, "info")
    run({
      pay_status: 'trade_success'
    })
  }
}


// ================================= 检索框「搜索」相关


// 检索框搜索方法
const order_sn = ref('')


function searchOrders() {
  router.push({
    name: "Orders",
    query: {
      order_sn: order_sn.value
    }
  })
}


// 当路由地址发生变化的时候，重新渲染表格数据
watch(() => route.params, (newParams, oldParams) => {
  console.log("路由参数发生了变化")
  run({
    order_sn: order_sn.value
  })


})


// ================================= 输出  显示
console.log("@@@@@@@@@@@@@@@@@@@@@@ FINISH")
console.log(data)
</script>


<style scoped>
</style>