el-table实现跨页全选

el-table实现跨页全选

在开发中,我们会遇到一些需要全选表格的需求,由于我们使用了后端分页,在选中时需要维护一个数组.便于回写,但是我们有时需要跨页全选,一个按钮选中所有,我们维护的数组如果从后台拿到所有数据去维护的话这样我们的性能就不太好了.所以我们需要另一种方式,如果我们选了跨页全选则需要进行维护自己反选掉的数据.(我们只有手动去反选.)

点击了跨页全选时我们维护不选中的数据

没有点击跨页全选时我们维护选中的数据

代码如下

<template>
   <div>
    <el-table class="tableList" :data="tableList"  ref="tableSelect"
    border stripe  
    @select="select" @select-all="selectAll">
        <el-table-column type="selection" width="55" />
        <el-table-column v-for="col in columns" :prop="col.prop" :key="col.id" :label="col.label" :min-width="col.width">
        </el-table-column>
    </el-table>
   <div class="bottom">
        <el-checkbox ref="checkAll" v-model="checked" @change="checkedChange" :indeterminate="isIndeterminate">跨页全选</el-checkbox>
        <Pagination :total="total" :page.sync="pageNum" :limit.sync="pageSize"  @pagination="getList"/>
   </div>
   </div>
</template>

<script>
import { getList } from '../../request/table'
import Pagination from '../Pagination/index.vue'
// 表格列
const columns =  [
  {label:'班级',prop:'className',width:'auto'},
  {label:'技术栈',prop:'stack',width:'auto'},
  {label:'性别',prop:'sex',width:'auto'},
  {label:'占有率',prop:'share',width:'auto'}
]
export default {
  name:'table-select',
  components:{
      Pagination
  },
  data(){
    return {
      tableList: [],
      columns:columns,
      pageNum:1,
      pageSize:10,
      total:0,
      tableSelectRow:[], //跨页全选则记录不选中否则记录选中
      checked:false,//是否跨页全选
      isIndeterminate:false,
    }
  },
  watch:{
      tableSelectRow(val){
        this.isIndeterminate = val.length > 0 && val.length < this.total
            if(this.total == val.length && this.checked){
                this.checked = false
                this.tableSelectRow = []
            }else if(!this.checked && this.total == val.length){
                this.checked = true
                this.tableSelectRow = []
            }
      }
  },
  methods:{
   getList(){
       const params = {
           _page:this.pageNum,
           _limit:this.pageSize
       }
       getList(params).then(res=>{
            this.tableList = res
            const tableSelectIds = this.tableSelectRow.map(item=>item.id)
            this.$nextTick(()=>{
                this.tableList.forEach(item=>{
                    if((!tableSelectIds.includes(item.id)&&this.checked) || (!this.checked && tableSelectIds.includes(item.id))){
                        this.$refs.tableSelect.toggleRowSelection(item,true)
                    }else{
                        this.$refs.tableSelect.toggleRowSelection(item,false)
                    }
                })
            })
       }).catch(err=>{
           console.log(err);
       })
       getList().then(res=>{
           this.total = res.length
       })
   },
   select(selection,row){
        const selected = selection.length && selection.indexOf(row) !== -1
        console.log('selected', selected);
        if((!selected&&!this.checked) || (selected&&this.checked)){
            let index = -1
            this.tableSelectRow.some((item,i)=>{
                if(item.id == row.id){
                    index = i
                }
            })
            if(index > -1) this.tableSelectRow.splice(index,1)
        }else{
            this.tableSelectRow.push(row)
        }
   },
   selectAll(selection){
        if((selection.length&&!this.checked) || (!selection.length&&this.checked)){
        // 全选
            this.tableList.forEach(item=>{
                if(!this.tableSelectRow.some(items =>  items.id == item.id)){
                    this.tableSelectRow.push(item)
                }
            })
        }else{
            // 全不选
            this.tableList.forEach(item=>{
                let index = -1
                this.tableSelectRow.some((items,i)=>{
                    if(items.id == item.id){
                        index = i
                    }
                })
                if(index > -1) this.tableSelectRow.splice(index,1)
            })
        }
    },
    checkedChange(val){
        console.log('checked', val, this.checked);
        if(this.isIndeterminate){
            this.checked = true
            this.$refs.checkAll.$el.querySelector('input').checked = true
        }
        this.tableSelectRow = []
        this.isIndeterminate = false
        if(this.checked  == true){
            this.tableList.forEach(item=>{
                this.$refs.tableSelect.toggleRowSelection(item,true)
            })
        }else{
            this.$refs.tableSelect.clearSelection()
        }
    }
  },
  mounted(){
    this.getList()
  }
}
</script>


<style lang="less" scoped>
.tableList{
  .table-head-box{
    display: flex;
    .el-icon-d-caret{
      margin-left: 10px;
      cursor: pointer;
    }
    .el-icon-caret-bottom{
      margin-left: 10px;
      cursor: pointer;
    }
  }
}
.bottom{
    margin: 20px;
    display: flex;
    justify-content: space-between;
}
</style>