技術標籤：iview

在iview的table元件中，前端在多選時如果點選下一頁則丟失了上一頁table的多選資料（由於採用的後端分頁，每次翻頁會直接重新整理為新資料）

實現效果
全選反選 選中單條 取消單條

程式碼部分

定義陣列

      selectedData: [], // 選中的陣列
      arr1: [], // 原本
      arr2: [] // 去重後的

表格

	<Table class="mt20" :data="tableData" :loading="loading" :columns="tableColumns" ref="table"
       @on-select="onSelectAll" @on-select-cancel='onSelectCancel'
       @on-select-all ='onSelectAll' @on-select-all-cancel='onSelectAllCancel'>
    </Table>
 

JS

   // 點選全選時觸發
    onSelectAll (selection) {
      // arr1 去重之前的 選中後合併的陣列
      this.arr1 = [...selection, ...this.selectedData]
      // 去重  some  和every 相反，只要有一個滿足條件，就返回true
      for (let val of this.arr1) {
        if (!this.arr2.some(item => item.serialNum === val.serialNum)) {
          this.arr2.push(val)
        }
      }
      if (this.arr2.length >= 30) {
        this.enableModal = true
      }
    },
    
    // 取消選中某一項時觸發
    onSelectCancel (selection, row) {
      // 拿到取消選擇的項資料 從arr2中去除 findIndex找返回傳入一個符合條件的陣列第一個元素位置,沒有返回-1
      let result = this.arr2.findIndex((ele) => {
        return ele.serialNum === row.serialNum
      })
      this.arr2.splice(result, 1)
    },
    
    // 點選取消全選時觸發
    onSelectAllCancel () {
      // 拿到當前分頁的資料進行取消選中處理
      // every方法，只要有一項不滿足條件就返回false，也就是說必須每一項都得滿足才能返回true。返回的是布林值。
      // * filter方法，只要條件滿足，我就將此元素返回出去，返回的是元素。
      // *  在本示例中，只要arr1中存在與arr2中相同的元素，我就返回false。也就是說，我拿著arr2中
      // *  的第一項去和arr1中的每一項去比較，如果code都不相等，滿足所有條件，我就返回true。
      // *       在filter中，只要條件為true，我就將這一項返回出去，就實現了批量刪除的效果。
      	this.arr2 = this.arr2.filter(item => {
        return this.tableData.every(item2 => {
          return item.serialNum !== item2.serialNum
        })
      })
    },
 

本文采用 serialNum 作為唯一的值 可以選為id 根據具體情況而定

每次點選分頁的時候，獲取到最新一頁的資料，進行選中回顯
在點選分頁 呼叫的事件裡寫

 getTableList (pageIndex) {
      this.pageIndex = pageIndex
      this.loading = true
      const data = {
        name: this.name,
        serialNum: this.serialNum,
        pageIndex,
        pageSize: this.pageSize
      }
      getDevicePageList(data)
        .then(res => {
          const { data: {data, code} } = res
          if (data && code === 0) {
            data.list.forEach(item => {
              this.arr2.forEach(element => {
                if (element.serialNum === item.serialNum) {
                  this.$set(item, '_checked', true)
                }
              })
            })
            this.tableData = data.list
            this.dataCount = data.total
          } else {
            this.$Message.error(res.message)
          }
          this.loading = false
        }, err => {
          // 介面錯誤
          console.log(err)
        })
        .catch((err) => {
          // 處理邏輯出錯
          console.log(err)
        })
    },
 

其中， 這一段具為重要
觸發翻頁按鈕時 iview提供了_checked的屬性 設定true即為選中

     data.list.forEach(item => {
              this.arr2.forEach(element => {
                if (element.serialNum === item.serialNum) {
                  this.$set(item, '_checked', true)
                }
        })