所有分页数据全选

一般情况我们都是全选当前页的数据，但是为了客户体验，我们可能会被要求全选所有分页的数据。这个问题代码不难，主要是思路的问题。这个时候肯定不是要求后端按照分页的形式返回数据，而是把所有数据一次性返回，我们再根据pageSize和pageIndex去截取数据，做成类型的分页效果。

<div >
    <div >
        <el-checkbox v-model="checkAll" @change="handleCheckAllListSectionChange">全选</el-checkbox>
        <div ></div>
        <el-checkbox-group v-model="checkedListSection" @change="handleSectionCheckedChange">
            <el-checkbox  v-for="(item,index) in ListSectionData" :label="item.SectionId" :key="index">
                {{item.SectionName}}
            </el-checkbox>
        </el-checkbox-group>
        <div >
            <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)
        }
    })
},

Tags 标签

加个好友，技术交流