<el-table stripe :data="list" border style="width: 100%" tooltip-effect="dark" v-loading="loading" element-loading-text="数据正在加载中" ref="multipleTable" @select="onTableSelect" @select-all="onTableSelectAll"> <el-table-column type="selection" width="55" align="center"></el-table-column> </el-table> <!-- 分页 --> <div class="el_page-box" style="text-align: right; margin-top: 10px;"> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="pagesizeList" :page-size="pagesize" :layout="pageLayout" :total="total" :background='pageBackground'> </el-pagination> </div>
引入下面封装的分页控件
import { pagingSearchCom } from '@/components/mixins/pagingSearch'; // import { pagingSearchCom } from '@/components/mixins/pagingSearch' // mixins: [pagingSearchCom], // 分页、查询 -- 封装在mixins里 import { mapState } from 'vuex' export const pagingSearchCom = { data(){ return { loading: false, list: [], //列表数据 currentPage: 1, //当前页数 pagesize: 10, //每页显示多少条 pagesizeList: [10, 20, 30, 40, 50], pageLayout: "total, sizes, prev, pager, next, jumper", pageBackground: true, total: 0, //默认数据总数 isCreated: false } }, methods: { // 页码 _getMixinsList(currentPage = this.currentPage, pagesize = this.pagesize) { this.currentPage = currentPage; this.pagesize = pagesize; this._requestPageList({ pageNo: currentPage, pageSize: pagesize, }) }, // 列表接口 _requestPageList(pageData) {}, // 分页 handleSizeChange(size) { this.pagesize = size; this._getMixinsList(1, size) //console.log(`每页 ${val} 条`); }, handleCurrentChange(currentPage) { this._getMixinsList(currentPage) //console.log(`当前页: ${val}`); }, //查询数据 searchDataMixin() { // console.log('查询成功') this._getMixinsList(1) }, }, created() { if(this.isCreated){ return } this._getMixinsList(); }, computed: { // 通过VUEX动态计算表格的高度 ...mapState({ tableHeight: state => state.searchCriteria.contentBoxHeight - 180 }) } }
引入下面封装的分页多选、全选控件