分页+elementUI的table分页多选

一、分页

后端分页，我们只用把请求的页数和每页显示的记录条数发送到后端，后端根据这两个值做好分页，并返回给前端，前端根据得到的返回值渲染到页面上，结合elementUI，如果要支持 page-sizes 的更改，则需要使用 total 属性，双向绑定数据总条数，elementUI根据page-size属性值和后端返回的总条数自动计算总页数。部分代码如下：

HTML：

<!-- 
    1. @current-change：改变当前页时触发
    2. current-page：当前页
    3. hide-on-single-page：只有一页时是否影藏页码
    4. total：数据的总条数
    5. page-sizes：每页显示的数据条数
-->
    <el-pagination
        background
        layout="prev, pager, next"
        :total="totalSize"    //总记录条数
        @current-change="changePage"
        :current-page="Number(page.nowPage)"    //当前页码
        :page-size="page.pagesize"    //每页显示的记录条数
        :hide-on-single-page="true"    //当页码只有一页时是否影藏页码
    >
    </el-pagination>

 JS：

export default {
    data() {
        return {
            queryInfo: { s4_name: "" }, //查询数据
            // 页码数据
            totalSize: 0,
            page: {
                nowPage: 1,
                pagesize: 5,
            },
        };
    },
    mounted() {
        this.getS4();
    },
    methods: {
        // 获取
        getS4() {
            this.$axios({
                method: "get",
                url: this.$api.content.getstore4S,   //自己的请求地址
                params: {
                    s4_name: this.queryInfo.s4_name, //搜索框中的值
                    pageIndex: (this.page.nowPage - 1) * this.page.pagesize, //当前页第一条记录下标
                    pagesize: this.page.pagesize, //每页返回记录条数
                },
                headers: {
                    "Content-type": "application/json",
                },
            }).then((resp) => {
                this.totalSize = resp.data.num;
            });
        },
        // 分页
        changePage(val) {
            // 改变当前页
            this.page.nowPage = val;
            this.getS4();
        },
    },
};

 Node.js：

//用async await做了异步处理
async getStore4S(req, resp) {
        let { s4_name, pageIndex, pagesize } = req.query;
        let arr1 = []; //获取个数
        let arr2 = []; //获取数据
        let sql1 = 'select count(*) as num from t_s4 where 1=1'
        let sql2 = 'select *,bra_name,reg_name from t_s4,t_car_brand,t_region where bra_id=fk_brand_id and reg_id=fk_region_id';
        if (s4_name) {
            sql1 = sql1 + ' and s4_name like ?'
            sql2 = sql2 + ' and s4_name like ? limit ?,?'
            arr1 = [`%${s4_name}%`]
            arr2 = [`%${s4_name}%`, Number(pageIndex), Number(pagesize)]  //注意 pageIndex 和 pagesize 是什么类型的，如果不是数字类型记得将之转换成数字类型，否则会出错
        } else {
            sql2 = sql2 + ' limit ?,?';
            arr2 = [Number(pageIndex), Number(pagesize)] 
        }
        let totalData = await new Promise((resolve, reject) => {
            db(sql2, arr2, function(err, data) {
                if (!err) {
                    resolve(data)
                } else {
                    reject(err)
                }
            })
        })
        db(sql1, arr1, function(err, data) {
            if (!err) {
                resp.send({
                    code: 200,
                    num: data[0].num,
                    totalData
                })
            } else {
                console.log(err);
                resp.send({
                    code: 500,
                    message: '数据库操作失败'
                })
            }
        })
    },

二、elementUI的table分页多选

        1. 设置

            :row-key="getRowKeys"

        2. 在复选框上增加属性

            :reserve-selection="true"

        3. methods方法中将数据放到自定义数组中，记得在data中定义一下

        4. 定义getRowKeys方法

        原文：elementUI的table分页多选，记住上一页并勾选中，:row-key的使用方法 - 吃的快不吐骨头 - 博客园