element表格分页多选、全选

<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
        })
    }
}

引入下面封装的分页多选、全选控件

上一篇:前端bootstrap分页+mybatis+PageHelper分页


下一篇:element中分页组件不刷新问题