快捷導(dǎo)航

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

更新時(shí)間：2024年05月25日 12:36:51 作者：奮斗的小鳥(niǎo)鳥(niǎo)

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

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

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

看效果圖：

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

1.跨頁(yè)多選功能實(shí)現(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>

簡(jiǎn)單分析一下上面的代碼：

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

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

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

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

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

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

您可能感興趣的文章: