vue + element-ui Table 的數(shù)據(jù)多選多頁選擇數(shù)據(jù)回顯，分頁記錄保存選中的數(shù)據(jù)

需求：想實現(xiàn)的功能是，在不同的頁面選擇項時，選擇的結(jié)果能保存起來存到另外一張表。多個頁面的選項都能被選到。
圖片描述

問題：現(xiàn)在當(dāng)我選了第一頁的一條數(shù)據(jù)時，點到第二頁，數(shù)據(jù)就刷新了，第一頁選的選項也就沒有保存了，所以就只能永遠(yuǎn)選擇一頁內(nèi)的數(shù)據(jù)。
圖片描述

  <el-table border ref="multipleTable" :data="orderTable" @selection-change="handleSelectionChange">
    <el-table-column type="selection" 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="本期應(yīng)還" align="center"></el-table-column>
    <el-table-column property="number" label="剩余期數(shù)" align="center"></el-table-column>
</el-table>

    handleSelectionChange(val) {
        this.multipleSelection = val;
        console.log(val);
    },

數(shù)據(jù)顯示后臺就是分頁給我的，我傳一個page給后臺，后臺就給我當(dāng)頁的數(shù)據(jù)。

回答

編輯回答

心夠野

答案
用element-ui table里這個參數(shù)
reserve-selection -->僅對 type=selection 的列有效，類型為 Boolean，為 true 則代表會保留之前數(shù)據(jù)的選項，需要配合 Table 的 clearSelection 方法使用。

配合row-key -->行數(shù)據(jù)的 Key，用來優(yōu)化 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="本期應(yīng)還" align="center"></el-table-column>
                    <el-table-column property="number" label="剩余期數(shù)" 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:function(){
    return{
        // 獲取row的key值
        getRowKeys(row) {
            return row.orderid;
        },
    }
}

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

2017年3月8日 11:49

編輯回答