Ant Design Vue 表格排序功能实现

本示例演示如何使用Ant Design Vue中的Table组件实现表格排序功能。通过配置Table的列属性，可以轻松实现对表格数据的升序和降序排序，提高用户体验。

<template>
  <a-table :columns="columns" :data-source="data" row-key="id">
  </a-table>
</template>

<script>
  export default {
    data() {
      return {
        columns: [
          {
            title: 'ID',
            dataIndex: 'id',
            sorter: (a, b) => a.id - b.id, // 排序函数
          },
          {
            title: '姓名',
            dataIndex: 'name',
            sorter: (a, b) => a.name.localeCompare(b.name), // 字符串排序
          },
          {
            title: '年龄',
            dataIndex: 'age',
            sorter: (a, b) => a.age - b.age,
          },
        ],
        data: [
          { id: 1, name: '张三', age: 25 },
          { id: 2, name: '李四', age: 30 },
          { id: 3, name: '王五', age: 28 },
        ],
      };
    },
  };
</script>

免责申明：文章和图片全部来源于公开网络，如有侵权，请通知删除 server@dude6.com