el-table分页多选,选一个其他类型相同的也选中

el-table分页多选

1.html部分

<el-table ref="multipleTable" border size="mini" :data="tableDataPage" v-loading="loadData"
              @selection-change="handleSelectionChange"
              @select="selectHandle"
              @select-all="selectAllHandle"
              tooltip-effect="dark">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column label="模块" prop="TYPE"></el-table-column>
</el-table>
<el-pagination style="text-align: right;margin-top: 10px;" :current-page.sync="page.PageNum" :page-sizes="[10,30,50,100]"
                   :page-size="page.PageSize" layout="total, sizes, prev, pager, next" :total="tableTotal"
                   @size-change="(val) =>{page.PageSize = val;setPage()}" @current-change="(val)=>{page.PageNum = val;setPage()}"
    ></el-pagination>

data部分

data():{
return {
    tableData: [],
    tableDataPage: [],
    page: {
        PageNum: 1,
        PageSize: 10
    },
    tableTotal: 0,
}
}

js部分

getTableData() {
  this.loadData = true
  list(this.form).then(res => {
    this.page.PageNum = 1
    this.multipleSelection = []
    this.loadData = false
  })
}
handleSelectionChange(selection) {
  // 多选: 两个按钮;分页;
  // 两个按钮: 全选和单选:先过滤(删除)当前数据,如果是新增就再加上
  // 分页: 把multipleSelection中存在且为本页的数据加上
  // this.multipleSelection = selection
},
selectHandle(selection, row) {
  let isAdd = selection.some(i => { // 判断是新增还是删除
    return i.TYPE === row.TYPE
  })
  // 先删除数据,再把数据加上
  this.multipleSelection = this.multipleSelection.filter(i => {
    return !(i.TYPE === row.TYPE)
  })
  if (isAdd) { // 新增:添加新数据;固费的话就添加所有数据
    this.multipleSelection.push(row)
  }
  this.addRowSelection() // 新增删除的时候需要重新触发
},

selectAllHandle(selection) {
  this.tableDataPage.forEach(row => { // 先删除数据,再把数据加上
    this.multipleSelection = this.multipleSelection.filter(i => { // 删除重复数据;固费的要到批次号这一级别
      return !(i.TYPE === row.TYPE)
    })
  })
  if (selection.length > 0) { // 新增
    let setFixFee = new Set()
    this.tableDataPage.forEach(row => {
      this.multipleSelection.push(row)
    })
  }
},
addRowSelection() { // 展示选中
  this.$nextTick(() => {
    this.$refs.multipleTable.clearSelection()
    this.multipleSelection.forEach(rowSel => { // 已经选中的数据存在于当前页面,则展示
      if (this.tableDataPage.find(i => {
        return i.TYPE === rowSel.TYPE
      })) { // 如果当前页面上存在则加上
        this.$refs.multipleTable.toggleRowSelection(rowSel)
      }
    })
  })
},
setPage() {
  let tableData = this.tableData
  this.tableTotal = tableData.length
  // 开始位置
  let startingPosition = (this.page.PageNum - 1) * this.page.PageSize
  if (startingPosition > this.tableTotal) {
    this.tableDataPage = []
  } else {
    this.tableDataPage = tableData.filter((item, index) => {
      // 当前索引小于开始位置,返回false
      if (index < startingPosition) {
        return false
      } else {
        // 当前索引大于开始位置加页数显示的个数,返回false
        return index < (startingPosition + this.page.PageSize);
      }
    })
  }
  this.addRowSelection(this.multipleSelection)
},