element ui 表格分页多选

  • 需求描述
  • 实现思路
  • 相关代码


需求描述

表格有分页需要多选，某page选中的数据，当再次到这个page的时候， 之前选中的数据需要是选中状态。比如在首页选中一些数据之后， 跳到第2页， 然后再回首页，首页之前选中的数据要是选中状态。

实现思路

1. Table 用到的事件:
@select : 当用户手动勾选数据行的 Checkbox 时触发的事件. 参数(selection, row), selection是一个数组, 所有选中的数据, row是点击该行的数据
@select-all : 当用户手动勾选全选 Checkbox 时触发的事件. 参数(selection), selection是一个数组, 选中的所有数据

2. Table 用到的Methods :
toggleRowSelection : 用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中） 参数(row, selected)

3. 描述

  1. 一个数组变量 multipleSelection放选中的数据 multipleSelection = [ ]
  2. 点击table 每列数据中的 checkbox 触发select事件时 (定义的方法selectARow) :
    首先判断状态是取消还是选中, 参数(selection, row), 如果selection数组中包含row, 且 selection长度不为空. 则当前点击是选中状态, 反之则是取消;
    选中： 将数据添加到multipleSelection中;
    取消： 将数据从multipleSelection中删除;
  3. 点击table中全选的checkbox 触发select-all事件 (定义的方法handleSelectAll): 首先判断状态是全选还是取消全选, 参数(selection)
    如果selection的长度和表格数据(tableData)的长度一致, 则是全选; 反之是取消全选
    全选: 将selection的数据合并到multipleSelection 中;
    取消全选: 将表格数据tableData 每一条从multipleSelection中删除;
  4. 当获取表格数据tableData 的时候, 判断每列数据是否是选中状态, 通过

this.$refs.contactTable.toggleRowSelection(item, true) 选中;

判断tableData 的每条数据是否在multipleSelection 中, 如在 获取tableData的那条数据item, 通过

this.$refs.contactTable.toggleRowSelection(item, true) 选中

相关代码

//html
<el-table v-loading="contactLoading" ref="contactTable" :data="contactData" 
 @select-all="handleSelectAll" @select="selectARow">
  <el-table-column type="selection"  width="50" />
  <el-table-column label="全选" prop="name" show-overflow-tooltip width="100px"> </el-table-column>
</el-table>
<el-pagination class="align_center" v-show="contactTotal>6"
  @current-change="_contactList"
  :current-page.sync="contactParams.pageNum"
  :page-size="6"
  layout="total, prev, pager, next"
  :total="contactTotal">
</el-pagination>
//js 三个关键方法
selectARow(val,row){ //单选Checkbox的事件
   let selectBool = val.length && val.indexOf(row) !== -1   //当前点击是否勾选
   if(!selectBool){  //取消勾选
       this.multipleSelection.forEach((item,i) => {
           if(item.id == row.id){
               this.multipleSelection.splice(i,1)
           }
       })

   }else{ //选中
       this.multipleSelection.push(row)
   }
},
handleSelectAll(val){  //全选 Checkbox的事件
   if(val.length == this.contactData.length){ //全选
       this.multipleSelection = this.multipleSelection.concat(val)
       //去重
       let obj = {}
       let result = []
       this.multipleSelection.forEach(item => {
           if(!obj[item.id]){
               result.push(item)
               obj[item.id] = true
           }
       })
       this.multipleSelection = result

   }else{ //取消全选
       this.contactData.forEach(item => {
           this.multipleSelection.forEach((multItem,i) => {
               if(item.id == multItem.id){
                   this.multipleSelection.splice(i,1)
               }
           })
       })
   }
},
// 获取table数据的时候,给每行的checkbox赋值
_contactList(val) {
  this.contactLoading = true;
  if(val){
    this.contactParams.pageNum = val
  }
  contactList(this.contactParams).then((res) => {
    this.contactData = res.data.rows
    this.contactTotal = res.data.total
    this.contactLoading = false
    this.$nextTick(()=>{
        this.contactData.forEach(item => {
            this.multipleSelection.forEach(multItem =>{
                if(multItem.id == item.id){
                    this.$refs.contactTable.toggleRowSelection(item, true);  //选中这个数据
                }

            })
        })
    })
  });

},