快捷導(dǎo)航

vue+elementUi中的table實現(xiàn)跨頁多選功能(示例詳解)

更新時間：2024年05月25日 12:36:51 作者：奮斗的小鳥鳥

最近在開發(fā)工業(yè)品超市的后臺系統(tǒng),遇到一個需求,就是實現(xiàn)在一個table表格中多選數(shù)據(jù),在網(wǎng)上查了好多,有些方法真的是無語,下面通過本文給大家分享vue+elementUi中的table實現(xiàn)跨頁多選功能,感興趣的朋友跟隨小編一起看看吧

最近在開發(fā)工業(yè)品超市的后臺系統(tǒng)，遇到一個需求，就是實現(xiàn)在一個table表格中多選數(shù)據(jù)，由于table表格中的數(shù)據(jù)較多，所以要分頁獲取，因此現(xiàn)在的需求變?yōu)椋?code>如果在跨頁的table表格中跨頁選擇數(shù)據(jù)

在網(wǎng)上查了好多，有些方法真的是無語的，寫的亂七八糟的，我整理一下，親測有效

看效果圖：

這樣返回到第一頁的時候，第一頁選中的兩條數(shù)據(jù)還是勾選的狀態(tài)的。
點擊表格底部的完成選擇訂單按鈕，可以拿到選中的三條數(shù)據(jù)。

1.跨頁多選功能實現(xiàn) 給table添加row-key屬性

<el-table
        :data="orderData"
        v-loading="orderloading"
        v-if="orderVisible"
        border
        :row-key="getRowKey"
        style="width: 100%"
        height="300px"
        @selection-change="handleSelectionChange"
        ref="multipleTable"
      >
 ....
 </el-table>

簡單分析一下上面的代碼：

data:就是table表格中要展示的數(shù)據(jù)，格式是一個數(shù)組
v-loading:加載表格數(shù)據(jù)時，為了能夠更好的人性化，可以添加這個加載屬性，然后在表格數(shù)據(jù)加載的過程中有個數(shù)據(jù)加載中的效果
v-if:因為我這個表格是跟dialog彈層一同存在的，為了保證數(shù)據(jù)在彈窗打開時能夠?qū)崟r渲染，所以我加了這個判斷條件
border:給表格添加邊框
row-key:這個就是實現(xiàn)跨頁選擇的關(guān)鍵，后面會講到用法
style:給表格添加寬度等css樣式
height:給表格添加高度，因為如果表格沒有數(shù)據(jù)或者數(shù)據(jù)較少的時候，為了美觀添加高度限制，這樣當(dāng)表格數(shù)據(jù)過多時，還可以實現(xiàn)固定表頭的效果
selection-change:勾選數(shù)據(jù)時，會觸發(fā)此函數(shù)
ref:類似于html中的Id，就是可以獲取唯一dom的參數(shù)

上面中的row-key需要綁定一個唯一值，我這邊的table中的數(shù)據(jù)，每一條數(shù)據(jù)中的id是唯一值，因此getRowKey函數(shù)如下：