Element ui 中使用table组件实现分页记忆选中

Element ui 中使用table组件实现分页记忆选中

旧方法

新方法

用element-ui table里这个参数
reserve-selection -->仅对 type=selection 的列有效，类型为 Boolean，为 true 则代表会保留之前数据的选项，需要配合 Table 的 clearSelection 方法使用。

配合row-key -->行数据的 Key，用来优化 Table 的渲染；在使用 reserve-selection 功能的情况下，该属性是必填的。类型为 String 时，支持多层访问：user.info.id，但不支持 user.info[0].id，此种情况请使用 Function。

<el-table border v-loading="loading"
                          ref="multipleTable"
                          :data="orderTable"
                          :row-key="getRowKeys"
                          @selection-change="handleSelectionChange">
                    <el-table-column type="selection" :reserve-selection="true" align="center" width="55"></el-table-column>
                    <el-table-column property="orderid" label="订单号" align="center"></el-table-column>
                    <el-table-column property="product_data" label="订单名称" align="center"></el-table-column>
                    <el-table-column property="totalprice" label="订单金额" align="center"></el-table-column>
                    <el-table-column property="remaining_payments" label="剩余还款" align="center"></el-table-column>
                    <el-table-column property="stage_price" label="本期应还" align="center"></el-table-column>
                    <el-table-column property="number" label="剩余期数" align="center"></el-table-column>
                </el-table>
                <!--分页-->
                <div class="pagination">
                    <el-pagination
                        background
                        @current-change ="handleCurrentChange"
                        layout="prev, pager, next"
                        :page-size="pagesize"
                        :total="total_number">
                    </el-pagination>
                </div>

data(){
    return{
        // 获取row的key值
        getRowKeys(row) {
            return row.id;
        },
    }
}

methods:

//选择筹款订单
            handleSelectionChange(rows) {
                this.multipleSelection = rows;
                this.select_order_number = this.multipleSelection.length;

                this.select_orderId = [];
                if (rows) {
                    rows.forEach(row => {
                        if (row) {
                            this.select_orderId.push(row.orderid);
                        }
                    });
                }
            }

原文参考地址：https://segmentfault.com/q/1010000012976664/a-1020000013052695