<template> <div class="merchandise-news"> <Breadcrumb :routes='routes'></Breadcrumb> <div class="goods-info"> <div class="table-list"> <!-- 表格 --> <a-table :columns="columns" :data-source="tableData" :locale='{emptyText:"暂无数据"}' :pagination="false" :scroll="{ x: 1300 }"> <!-- <span slot="action" slot-scope="text, record"> <a-button type="link" @click="goEditPage(record)">编辑</a-button> </span> --> </a-table> <!-- 3.页面使用分页组件 --> <Pagination v-model="pagination.current" :total="pagination.totalCount" show-size-changer :page-size="pagination.pageSize" @onShowSizeChange="onShowSizeChange"></Pagination> </div> </div> </div> </template> <script> import Pagination from "@/components/table/Pagination"; //1. 引入 Pagination.vue 组件,注意路径哦~\ export default { data() { return { //表格数据: columns: [ { title: '序号', customRender: (text, record, index) => `${index + 1}` }, { title: '品牌', dataIndex: 'brand', key: 'brand', ellipsis: true, }, { title: '状态', dataIndex: 'statsName', key: 'statsName', ellipsis: true, }, { title: '操作', key: 'action', scopedSlots: { customRender: 'action' }, } ], // pageSizeOptions: ['10', '20', '30', '40', '50'], //自定义分页 pagination: { //分页数据 current: 1, pageSize: this.$defaultPageSize, totalCount: 500 }, } }, components: { Pagination //2. 在components中定义Pagination }, mounted() { // this.getStoreList() }, methods: { // // 获取列表 // async getStoreList() { // let param = { // pageNo: this.pagination.current, // pageSize: this.pagination.pageSize // }; // let res = await getBaseStoreList(param); // let list = res.data.result.list //列表数据 // this.tableData = list // this.pagination.totalCount = res.data.result.totalCount //表格长度 // }, // // 分页改变时调用组件里的方法 // onShowSizeChange(current, pageSize) { // this.pagination.current = current // this.pagination.pageSize = pageSize; // //改变完 重新渲染数据 // this.getStoreList() // }, } } </script> <style scoped lang="scss"> </style>