Ant Design vue的table

Ant Design Vue的Table是一个灵活的、可定制的表格组件，可以根据需求来展示数据。它支持排序、筛选、分页、可编辑、多级表头等功能，并且可以自定义表头、行、单元格等样式。

使用Ant Design Vue的Table需要先安装Ant Design Vue组件库，并在代码中引入Table组件。然后，可以在代码中使用Table标签，并传入相应的数据和配置参数来展示表格。例如：

<template>
  <a-table :columns="columns" :data-source="data">
    <template #name="{ text }">
      <a :href="`/detail/${text}`">{{ text }}</a>
    </template>
  </a-table>
</template>

<script>
import { Table, Button } from 'ant-design-vue';

export default {
  components: {
    Table,
    Button,
  },
  data() {
    return {
      columns: [
        {
          title: 'ID',
          dataIndex: 'id',
          key: 'id',
          sorter: (a, b) => a.id - b.id,
        },
        {
          title: 'Name',
          dataIndex: 'name',
          key: 'name',
        },
        {
          title: 'Age',
          dataIndex: 'age',
          key: 'age',
          sorter: (a, b) => a.age - b.age,
        },
        {
          title: 'Action',
          key: 'action',
          slots: { customRender: 'name' },
        },
      ],
      data: [
        {
          id: 1,
          name: 'John Brown',
          age: 32,
        },
        {
          id: 2,
          name: 'Jim Green',
          age: 42,
        },
        {
          id: 3,
          name: 'Joe Black',
          age: 32,
        },
      ],
    };
  },
};
</script>

上述代码展示了一个简单的表格，其中包含了ID、Name、Age三列数据，并且Name列是可点击的链接。同时，表格支持排序功能，可以根据ID和Age两列数据进行升序或降序排列。