最近在開發(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ù)在彈窗打開時能夠實時渲染，所以我加了這個判斷條件
border:給表格添加邊框
row-key:這個就是實現(xiàn)跨頁選擇的關鍵，后面會講到用法
style:給表格添加寬度等css樣式
height:給表格添加高度，因為如果表格沒有數(shù)據(jù)或者數(shù)據(jù)較少的時候，為了美觀添加高度限制，這樣當表格數(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ù)如下：

getRowKey(row) {
  return row.id;
},

2.在type="selection"元素上添加:reserve-selection=“true”

重點：這樣就可以了，選了數(shù)據(jù)再分頁再返回去基本是沒問題的還是選中狀態(tài)

到此這篇關于vue+elementUi中的table實現(xiàn)跨頁多選功能的文章就介紹到這了,更多相關vue elementUi跨頁多選內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論