el-table多选翻页选中(后端分页)

 <el-table ref="multipleTable" v-loading="loading" :data="tableData"
  :row-key="getRowKeys" stripe
  @selection-change="onSelectionChange" 
  @select="selectTion"
  @select-all="selectAll">
<el-table-column :selectable="selectable" :key="index" align="center" type="selection" width="55px" reserve-selection></el-table-column>
 </el-table>
  watch: {
    tableData: {
      handler(val) {
        this.backSelect()
      }
    }
  }, 

  methods: {
  // 全选
    selectAll(selection) {
      console.log(selection)
      if (selection.length > 0) {
        let list = this.selectionList?.map((v) => v.resumeId)
        selection.forEach((i) => {
          if (!list.includes(i.resumeId)) {
            this.selectionList.push(i)
          }
        })
      } else {
        let resumeIdLise = this.tableData.map((i) => i.resumeId)
        let val = this.selectionList.filter((v) => !resumeIdLise.includes(v.resumeId))

        // this.$emit('update:selectionList', val)

        this.$emit('updateSelectionList', val)
      }
    },
    selectTion(selection, row) {
      // console.log('--- selection ---', selection, row)
      const index = this.selectionList.findIndex((i) => i.resumeId == row.resumeId)
      if (index !== -1) {
        this.selectionList.splice(index, 1)
      } else {
        this.selectionList.push(row)
      }
    },
      getRowKeys(row) {
      return row.resumeId
    },
    
    // 反选 (只需要在每次获取列表数据的时候反选)
    backSelect() {
      if (this.tableData?.length > 0 && this.selectionList?.length > 0) {
        console.log(this.tableData, 'this.tableData')
        this.$refs['TableList'].$refs['multipleTable'].clearSelection() // 清除之前页面的选中状态
        this.$nextTick(() => {
          this.selectionList.forEach((v) => {
            let item = this.tableData.find((obj) => {
              return obj['resumeId'] === v['resumeId']
            })
            if (item) {
              this.$refs['TableList'].$refs['multipleTable'].toggleRowSelection(item)
            }
          })
        })
      }
    },
    
    // 禁用选择框
    selectable() {
      if (this.selectionList && this.selectionList.length >= 20) {
        this.$message.warning('最多选择20个简历数据')
        return false
      }
      return true
    },
    
        // 删除
    onDel(item, index) {
      this.selectionList.splice(index, 1)
      if (item) {
        this.$nextTick(() => {
          this.$refs['TableList'].$refs['multipleTable'].toggleRowSelection(item, false)
        })
      } else {
        this.$nextTick(() => {
          this.$refs['TableList'].$refs['multipleTable'].clearSelection()
        })
      }
    },

    // 弹窗  取消
    onCancel() {
      this.visible = false
      this.pageInfo['pageNum'] = 1
    },

    // 弹窗 确定
    onConfirm() {
      this.loading = true
      if (this.selectionList && this.selectionList.length === 0) {
        this.loading = false
        return this.$message.warning('请选择简历数据')
      }
      this.$emit('onConfirm', this.selectionList, this.index)
      this.visible = false
      this.loading = false
      this.pageInfo['pageNum'] = 1
      // this.$emit('update:selectionList', [])
      // this.selectionList = []
    },
    
    // 下载简历
    download(row) {
      if (row.resumeFile.fileInnerUrl) {
        let a = document.createElement('a')
        a.style.display = 'none'
        a.href = row.resumeFile.fileInnerUrl
        document.body.appendChild(a)
        a.click()
      }
    }
    }
  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值