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 = thissetTimeout( 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 = truebreak;}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 = thissetTimeout( 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)breakelse 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 = falsethat.$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}
}