一般情况下我们的需求都是全选当前分页的所有数据,但是有时候为了用户体验,可能需要全选所有分页的数据。这个需求代码不难,主要是思路的问题。有了思路,问题就很简单了。首先肯定不能让后端返回分页的数据了,而是一次性返回所有的数据,然后我们再根据pageSize和pageIndex对数据进行截取,这样就做成了分页的效果
微信图片_20210111102418.png

<div class="choose-specialities-box auto-alert-box alert-p-15">
    <div class="overflow-y">
        <el-checkbox v-model="checkAll" @change="handleCheckAllListSectionChange">全选</el-checkbox>
        <div style="margin: 15px 0;"></div>
        <el-checkbox-group v-model="checkedListSection" @change="handleSectionCheckedChange">
            <el-checkbox class="el-checkbox-check" v-for="(item,index) in ListSectionData" :label="item.SectionId" :key="index">
                {{item.SectionName}}
            </el-checkbox>
        </el-checkbox-group>
        <div class="pagination-box">
            <el-pagination @size-change="handleListSectionSizeChange" @current-change="handleListSectionCurrentChange" :current-page="par.pageIndex"
                :page-size="par.pageSize" :page-sizes="pageArr" layout="total, sizes, prev, pager, next,jumper" :total="pageTotal">
            </el-pagination>
        </div>
    </div>
</div>
ListSectionChange(val) {
    var _this = this;
    $.request({
        url: "/api/assessCheckReport/GetAssessAllSectionNoPaging",
        type: "get",
        isLoad: true,
        data: {},
        success: function (data) {
            var start = (_this.par.pageIndex - 1) * _this.par.pageSize
            var end = _this.par.pageIndex* _this.par.pageSize + 1
            //获取当前页数据,当前分页会有选中样式
            _this.ListSectionData = data.slice(start, end)
            //全选反选功能
            if (_this.checkedListSection.length == data.length) {
                _this.checkedListSection = []
            } else {
                for (var i = 0; i < data.length; i++) {
                    _this.checkedListSection.push(data[i].SectionId)
                }
            }
            //确定按钮保存选择,取消的话不保存
            _this.checkedListSectionTemp == _this.checkedListSection
            //数组去重
            _this.checkedListSection = _this.newArr(_this.checkedListSection)
        }
    })
},

小雨淅淅
4 声望1 粉丝