vue3封装分页组件

1.新建Pagination文件以及该文件夹下新建index.vue

2.在index.vue文件中编写一下代码

3.使用封装的组件

import { pageList } from '@/api/dataScheduling/portDataList'

const searchParams = reactive({
    containerNo: '', // 集装箱号
    searchDate: '', // 筛选时间
    dataStatus: '', // 状态
    shipName: '', // 船名
    destinationPort: '', // 目的港
    pageNum: 1, // 页码
    pageSize: 30, // 条数
});

const data = reactive({
    total: 10, // 总条数
    tableData: [], // 数据列表
});
onMounted(() => {
    getList();
});

// 获取数据列表
const getList = () => {
    let params = { ...searchParams }
    pageList(params).then(res => {
        console.log('获取列表', res);
        data.tableData = res.rows
        data.total = res.total
    })
};