使用Vue3+ts 开发ProTable源码教程示例

使用Vue3+ts开发ProTable源码，需要先了解Vue3、TypeScript和ProTable的相关知识。以下是开发教程及示例。

1. 安装ProTable

首先需要安装ProTable，在命令行中执行:

npm install @ant-design-vue/pro-table --save

2. 搭建Vue3项目

使用Vue CLI创建Vue3项目：

vue create my-project

安装Vue Router和Vuex：

npm install vue-router vuex --save

在main.js中导入并挂载Vue Router和Vuex：

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
createApp(App).use(router).use(store).mount('#app');

3. 创建ProTable组件

在/src/components目录下创建ProTable.vue文件：

<template>
    <div>
        <a-table :columns="columns" :data-source="dataSource"></a-table>
    </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { Table } from 'ant-design-vue';

export default defineComponent({
    name: 'ProTable',
    components: { Table },
    props: {
        data: {
            type: Array,
            required: true
        },
    },
    data() {
        return {
            columns: [
                { title: '姓名', dataIndex: 'name', key: 'name' },
                { title: '年龄', dataIndex: 'age', key: 'age' },
                { title: '地址', dataIndex: 'address', key: 'address' },
            ],
            dataSource: []
        };
    },
    watch: {
        data: {
            immediate: true,
            handler(newVal, oldVal) {
                this.dataSource = newVal;
            }
        },
    }
});
</script>

4. 在页面中使用ProTable组件

在/src/views目录下创建Home.vue文件：

<template>
    <div>
        <h1>ProTable示例</h1>
        <ProTable :data="data"></ProTable>
    </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import ProTable from '@/components/ProTable.vue';

export default defineComponent({
    name: 'Home',
    components: { ProTable },
    data() {
        return {
            data: [
                { key: '1', name: 'John Brown', age: 32, address: 'New York No. 1 Lake Park' },
                { key: '2', name: 'Jim Green', age: 42, address: 'London No. 1 Lake Park' },
                { key: '3', name: 'Joe Black', age: 32, address: 'Sidney No. 1 Lake Park' },
            ]
        };
    },
});
</script>

然后在/src/router/index.ts中配置路由：

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
import Home from '../views/Home.vue';

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'Home',
    component: Home,
  },
];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
});

export default router;

启动项目，即可看到ProTable示例。

示例1：基于ProTable的表格分页功能

我们希望在表格中实现分页功能，需要在ProTable.vue组件中添加pagination数据绑定：

<template>
    <div>
        <a-table :columns="columns" :data-source="dataSource" :pagination="pagination"></a-table>
    </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { Table } from 'ant-design-vue';

export default defineComponent({
    name: 'ProTable',
    components: { Table },
    props: {
        data: {
            type: Array,
            required: true
        },
    },
    data() {
        return {
            columns: [
                { title: '姓名', dataIndex: 'name', key: 'name' },
                { title: '年龄', dataIndex: 'age', key: 'age' },
                { title: '地址', dataIndex: 'address', key: 'address' },
            ],
            dataSource: [],
            pagination: {
                current: 1,
                pageSize: 2,
                total: 0,
                showSizeChanger: false,
                showQuickJumper: true,
                onChange: this.handlePageChange,
                onShowSizeChange: this.handlePageSizeChange
            }
        };
    },
    watch: {
        data: {
            immediate: true,
            handler(newVal, oldVal) {
                this.dataSource = newVal;
            }
        },
    },
    methods: {
        handlePageChange(currentPage) {
            console.log(currentPage);
        },
        handlePageSizeChange(pageSize, currentPage) {
            console.log(pageSize, currentPage);
        },
    }
});
</script>

然后在Home.vue组件中修改测试数据，大于两条才能触发分页功能：

data() {
    return {
        data: [
            { key: '1', name: 'John Brown', age: 32, address: 'New York No. 1 Lake Park' },
            { key: '2', name: 'Jim Green', age: 42, address: 'London No. 1 Lake Park' },
            { key: '3', name: 'Joe Black', age: 32, address: 'Sidney No. 1 Lake Park' },
            { key: '4', name: 'Jonson Zhang', age: 28, address: 'Beijing No. 1 Lake Park' },
            { key: '5', name: 'Lucy Liu', age: 24, address: 'Hangzhou No. 1 Lake Park' },
        ]
    };
},

然后就可以在页面中看到分页功能了，当数据超过一页时，会根据设置显示分页控件。

示例2：基于ProTable的表格列排序

我们希望在表格中实现列排序功能，需要在ProTable.vue组件中的相应列添加customSorter方法：

<template>
    <div>
        <a-table :columns="columns" :data-source="dataSource"></a-table>
    </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { Table } from 'ant-design-vue';

export default defineComponent({
    name: 'ProTable',
    components: { Table },
    props: {
        data: {
            type: Array,
            required: true
        },
    },
    data() {
        return {
            columns: [
                { title: '姓名', dataIndex: 'name', key: 'name' },
                { title: '年龄', dataIndex: 'age', key: 'age', customSorter: function(a, b) {
                    return a.age - b.age;
                } },
                { title: '地址', dataIndex: 'address', key: 'address' },
            ],
            dataSource: []
        };
    },
    watch: {
        data: {
            immediate: true,
            handler(newVal, oldVal) {
                this.dataSource = newVal;
            }
        },
    },
});
</script>

然后在Home.vue组件中添加测试数据，以年龄为例：

data() {
    return {
        data: [
            { key: '1', name: 'John Brown', age: 32, address: 'New York No. 1 Lake Park' },
            { key: '2', name: 'Jim Green', age: 42, address: 'London No. 1 Lake Park' },
            { key: '3', name: 'Joe Black', age: 26, address: 'Sidney No. 1 Lake Park' },
            { key: '4', name: 'Jonson Zhang', age: 28, address: 'Beijing No. 1 Lake Park' },
            { key: '5', name: 'Lucy Liu', age: 24, address: 'Hangzhou No. 1 Lake Park' },
        ]
    };
},

然后在页面中测试，点击“年龄”列标题可以对表格数据进行排序。