后臺(tái)管理系統(tǒng)中的列表頁(yè)面，一般都會(huì)有對(duì)列表數(shù)據(jù)進(jìn)行批量操作的功能，例如：批量刪除、批量刪除等。

之前項(xiàng)目中只是簡(jiǎn)單的用到Element框架中常規(guī)的屬性、事件。在一次機(jī)緣巧合下，了解到一個(gè)公司內(nèi)部的框架是基于Element框架內(nèi)部實(shí)現(xiàn)了一些插件功能，對(duì)于表格這一塊完善了很多功能，當(dāng)時(shí)沒(méi)有把握住機(jī)會(huì)去看源碼是怎么實(shí)現(xiàn)的，現(xiàn)在有點(diǎn)小后悔呢，嚶嚶嚶~~~~沒(méi)關(guān)系，自己慢慢一點(diǎn)一點(diǎn)實(shí)現(xiàn)。

實(shí)現(xiàn)的功能有：

• 分頁(yè)數(shù)據(jù)選擇 
• 全選所有數(shù)據(jù)（不是element框架自帶的全選本頁(yè)哦?。?/li>

1、分頁(yè)數(shù)據(jù)選擇

一開始以為不就是分頁(yè)的時(shí)候把之前選中的數(shù)據(jù)存儲(chǔ)在一個(gè)list里面嘛，然后選擇的時(shí)候map一下。等到自己寫代碼的時(shí)候，會(huì)發(fā)現(xiàn)沒(méi)有那么簡(jiǎn)單，百度后，發(fā)現(xiàn)有兩個(gè)屬性被忽視了

•  row-key  
• reserve-selection

代碼截圖：

事件代碼：

getRowKeys (row) {
 return row.execId
}

這樣通過(guò) selectionChange 方法就能獲取頁(yè)面中選中數(shù)據(jù)的改變，將選中的數(shù)據(jù)保存到list中

selectionChange (rows) {
 this.checkList = rows
}

2、全選所有數(shù)據(jù)

element框架中有select-all事件，全選本頁(yè)所有數(shù)據(jù)，但是項(xiàng)目中，經(jīng)常會(huì)遇到說(shuō)對(duì)所有的進(jìn)行操作，例如批量刪除（刪除所有數(shù)據(jù)，這個(gè)權(quán)限有點(diǎn)大）

實(shí)現(xiàn)思路：

• 一個(gè)全選所有復(fù)選框，當(dāng)選中時(shí)，前端傳遞一個(gè)參數(shù)Flag:1給后臺(tái)，后臺(tái)就會(huì)知道這是對(duì)所有數(shù)據(jù)進(jìn)行操作，同時(shí)前后臺(tái)之間都不用進(jìn)行龐大的數(shù)據(jù)傳輸 

<el-checkbox v-model="allCheck" @change="allCheckEvent">全選所有</el-checkbox>

• 選中全選所有復(fù)選框，當(dāng)前頁(yè)數(shù)據(jù)需全部是選中狀態(tài)，翻頁(yè)到另一頁(yè)，這一頁(yè)的數(shù)據(jù)也是全部選中狀態(tài) （監(jiān)聽當(dāng)前頁(yè)中數(shù)據(jù)）

allCheckEvent () {
 if (this.allCheck) {
 this.testList.forEach(row => {
 this.$refs.recordTable.toggleRowSelection(row, true)
 })
 } else {
 this.$refs.recordTable.clearSelection()
 }
}

watch: {
 testList: {
 handler (value) {
 if (this.allCheck) {
 let that = this
 let len = that.checkList.length
 value.forEach(row => {
  for (let i = 0; i < len; i++) {
  if (row.execId === that.checkList[i].execId) {
  that.$refs.recordTable.toggleRowSelection(row, false)
  break
  } else {
  that.$refs.recordTable.toggleRowSelection(row, true)
  }
  }
 })
 }
 },
 deep: true
 }
}

• 選中全選所有復(fù)選框，同時(shí)，已經(jīng)翻頁(yè)了兩頁(yè)，選中的數(shù)據(jù)是兩頁(yè)數(shù)據(jù)，若取消其中一行數(shù)據(jù)的選中狀態(tài)，此時(shí)，全選所有取消，當(dāng)前選中的數(shù)據(jù)應(yīng)是：已翻頁(yè)的兩頁(yè)數(shù)據(jù)-取消的那一行數(shù)據(jù)

selectOne () {
 if (this.allCheck) {
 this.allCheck = false
 }
}

實(shí)現(xiàn)的表格：

走了不少?gòu)澛凡抛⒁獾降膯?wèn)題：

• 若從第一頁(yè)翻選到第二頁(yè)，然后又回到第一頁(yè)，選中的數(shù)據(jù)理應(yīng)是1+2兩頁(yè)的數(shù)據(jù)，現(xiàn)實(shí)是1+2+1這三頁(yè)數(shù)據(jù)，在展現(xiàn)形式上是看不出來(lái)問(wèn)題，而且前面說(shuō)了，全選所有的時(shí)候，我向后臺(tái)傳的參數(shù)只是一個(gè)flag，而不是這些選中數(shù)據(jù)。但是若在第一頁(yè)取消一行數(shù)據(jù)，此時(shí)全選所有數(shù)據(jù)框已取消，本條數(shù)據(jù)也不是選中狀態(tài)，翻到第二頁(yè)，在回到第二頁(yè)，Duang~那條數(shù)據(jù)又回到了選中狀態(tài)！因?yàn)檫x中數(shù)據(jù)中該條數(shù)據(jù)是兩條啊，你取消了一個(gè)，另一個(gè)還在呀，當(dāng)然你再取消一次，再回來(lái)，是取消狀態(tài)，bug，bug，bug！
• 想到的就是數(shù)據(jù)要去重，首先想到的是從結(jié)果去重，在selectionChange方法中去重，悲劇了，根本不起作用，理清思路后發(fā)現(xiàn)：當(dāng)選擇項(xiàng)發(fā)生改變時(shí)，調(diào)用selectionChange方法獲取選中的所有數(shù)據(jù)，此時(shí)我們用forEach遍歷數(shù)據(jù)，用toggleRowSelection方法將頁(yè)面中的數(shù)據(jù)選中，此時(shí)toggleRowSelection一次，selectionChange方法執(zhí)行一次 那就在監(jiān)聽數(shù)據(jù)時(shí)，如果數(shù)據(jù)ID相同，不在執(zhí)行toggleRowSelection方法

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，謝謝大家對(duì)腳本之家的支持。

最新評(píng)論