elementui中el-table实现翻页、全选

问题描述

在最近的一个项目中，我需要实现表格的翻页，并且还要实现全选、多选功能

众所周知，el-checkbox默认样式不好改，所以在这里我没有用elementui中的多选框，用的是<input type="checkbox">，这样样式是好修改了，但是实现全选就得靠手写了

解决思路

第一步很简单，在<el-table>中加入多选框

<el-table-column width="75">
	//表头的全选框
	<template slot="header" slot-scope="slot">
    	<input name="selectAll" type="checkbox"/>
    </template>
	//input多选框
    <template slot-scope="scope">
         <input type="checkbox" class="checkBox">
    </template>
</el-table-column>

接下来就是我在实现需求时遇到的各种问题了
question1：表格获取后台数据的方法是分页查询，翻页的时候传给后台当前页码currentPage和每页的大小pageSize，前台获取到数据后重新渲染页面，也就是说每次翻页页面都会重新渲染，前一页勾选了的多选框在翻页之后再翻回去就消失了，那么要怎样才能记住每一页多选框的选择情况呢？
answer1：给input框动态绑定类名用来区分这个input框是哪一页的input框；给每行数据添加一个isSelected属性并用v-model绑定，用来记录选择的情况；绑定一个函数handleDelete，勾选、取消勾选时触发；设置delData数组，数组中保存选中的数据id

<input :class="`chooseInfo${currentPage}`" type="checkbox" class="checkBox" v-model="scope.row.isSelected" @click.stop="handleDelete(scope)">

   handleDelete(data){
                var that = this
                setTimeout( function() {
                //勾选时把该行数据的id存入数组
                    if(data.row.isSelected == true){
                        that.delData.push(data.row.id)
                    }else if(data.row.isSelected == false){
                    //取消勾选时，把该行数据的id从数组中删除
                        for(let i =0; i < that.delData.length; i++){
                            if(that.delData[i] === data.row.id){
                                that.delData.splice(i,1)
                            }
                        }
                    }
                    console.log(that.delData)
                }, 1000);
            },

在渲染每一页数据之前，将获取到的表格数据中每一行的id和delData数组中的id做比较，如果delData中存入了该行的id，则该行的isSelected 置为true

 for(let i = 0; i < this.tableData.length; i++){
                        for(let j = 0; j < this.delData.length; j++){
                            if(this.tableData[i].id === this.delData[j]){
                                this.tableData[i].isSelected = true
                                break;
                            }else if(j === this.delData.length - 1) {
                                this.tableData[i].isSelected = false
                            }
                        }
                        console.log(this.delData)
                        console.log(this.tableData[i].isSelected)
                    }

以上，翻页时多选框的选择记录就能够被保存啦！
question2：如何实现全选，实现目标：选中全选框只会勾上当前页的所有多选框，其他页不受影响
answer2：全选框绑定v-model="allSelected[currentPage]"，绑定函数@click="selectAllUsers()"

 <input name="selectAll" type="checkbox" v-model="allSelected[currentPage]" @click="selectAllUsers()"/>

 async selectAllUsers(){  //全选
                await this.judgeSelect()
            },
            judgeSelect(){
                var that = this
                setTimeout( function() {
                    if (that.allSelected[that.currentPage] === true) {
//                        $('.chooseInfo' + that.currentPage).attr("checked","true")
                        for(let i = 0; i < that.tableData.length; i++){
                            that.tableData[i].isSelected = true
//                            that.$forceUpdate();
                            that.$set(that.tableData,i,that.tableData[i])
                        }
                        for(let i = 0; i < that.tableData.length; i ++){
//                            判断是否已存在于需要删除的数组中
                            if(that.delData.length != 0){
                                for(let j = 0 ; j < that.delData.length; j++){
                                    if(that.delData[j] === that.tableData[i].id)
                                    break
                                    else if(j === that.delData.length-1)
                                        that.delData.push(that.tableData[i].id)
                                }
                            }else{
                                that.delData.push(that.tableData[i].id)
                            }
                        }
                    } else if (that.allSelected[that.currentPage] === false){
//                        $('.chooseInfo' + that.currentPage).removeAttr("checked");
                        for(let i = 0; i < that.tableData.length; i++){
                            that.tableData[i].isSelected = false
                            that.$set(that.tableData,i,that.tableData[i])
                        }
                        for(let i = 0; i < that.tableData.length; i ++){
                            for(let j = 0 ; j < that.delData.length; j ++){
                                if(that.delData[j] === that.tableData[i].id){
                                    that.delData.splice(j,1)
                                }
                            }
                        }
                    }
                }, 100);
            },

在获取数据接口的函数中，加上：

if(this.allSelected.length === 0)
{
      for(let i = 1 ; i <= this.totalPage; i++){
             this.allSelected[i] = false
      } 
}