Element ui Table 分页多选

Element ui Table 分页多选

其实分页多选，重点不在于如何进行分页选择，而在于选择后如何对分页内容进行回显。

分页选择

我们先来看一下element ui 中table组件提供的两个属性

row-key 上图说的很清楚，需要与reserve-selection一起使用，那我们接下来再看一下reserve-selection

简单点来说，reserve-selection就是当我们在切换数据时，会保留有之前选中的数据，比如上一页、下一页等。此时需要注意一点的就是：什么时候我们需要保留之前的数据，什么时候不需要，不需要的时候记得清空选中项噢！this.$refs.multipleTable.clearSelection();
我们可以先把每页选中的数据，存储在Map中，key为当前页码。
贴个代码吧！！！

        <el-table :data="deviceArr"  border stripe ref="multipleTable" @selection-change="handleSelectionChange" :row-key="getRowskey">
            <el-table-column type="selection" :reserve-selection="true"></el-table-column>
            <el-table-column type="index" label="#"></el-table-column>
            <el-table-column label="设备名称" prop="deviceName"></el-table-column>
            <el-table-column label="设备类型" prop="deviceType"></el-table-column>
            <el-table-column label="指标名称" prop="targetName"></el-table-column>
            <el-table-column label="指标类型" prop="targetType"></el-table-column>
        </el-table> 
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="queryInfo.pageNow"
            :page-sizes="[1, 2, 5, 10]"
            :page-size="queryInfo.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>  
        <script>
          data() {
            return {
                deviceArr: [], //table数据
                queryInfo:{
                    pageNow :1,
                    pageSize :10
                 },
                total : 0, // 总记录数
                tableChecked : [], // 选中数据
                multipleSelectionAll: new Map(), //所有选中的数据包含跨页数据
            }
        },
        methods: {
	         getRowskey(row) {
	         	// 返回行的唯一标识 	
	            return row.targetNo;
	        },
	        //多选监听
	        handleSelectionChange(val) {
	            this.tableChecked = val;
	            this.multipleSelectionAll.set(this.queryInfo.pageNow,val);
	        },
        }
      </script>  

分页选中数据回显

	        // 获取表格数据
	        findTargetByTypeAndPage(type) {
                api.findTargetByTypeAndPage(this.queryInfo, this.deviceType, this.targetName).then(res => {
                    if(res.code != 0){
                        this.$message.error(res.msg)
                        return;
                    }
                    this.deviceArr = res.data.alDevice;
                    this.total = res.data.totalCount;
                    this.$nextTick(() => {
                    	// this.component.chartBind.alDeviceManage 是上次选中的数据
                    	// 对当前页进行数据回显
                        this.component.chartBind.alDeviceManage.forEach(row => {
                            this.deviceArr.forEach(item => {
                                if ( row.targetNo == item.targetNo ) 
                                    this.$refs.multipleTable.toggleRowSelection(item, true);
                            });
                        });
                        // 当前页选中数据存储在Map中
                        this.multipleSelectionAll.set(this.queryInfo.pageNow, this.tableChecked);
                        // 将其他页面选中数据存储在Map中
                        if ( type == 'init') this.findOthertarget();
                    });
                });
            },
            // 获取其他分页数据
            findOthertarget() {
           		// 总页码
                let totalPage = (this.total + this.queryInfo.pageSize -1) / this.queryInfo.pageSize;
                for(let i=this.queryInfo.pageNow + 1; i <= totalPage; i++) {
                    api.findTargetByTypeAndPage({pageNow: i, pageSize: this.queryInfo.pageSize}, this.deviceType, this.targetName).then(res => {
                        if(res.code == 0){
                            let datas = [];
                            this.component.chartBind.alDeviceManage.forEach(row => {
                                res.data.alDevice.forEach(item => {
                                    if ( row.targetNo == item.targetNo ) 
                                        datas.push(item);
                                });
                            });
                            this.multipleSelectionAll.set(i, datas);
                        }
                    });
                }
            },

以上就可以了，但这样做还有最大的一个弊端就是会消耗资源，因为初始化数据回显时，要把所有分页内容都获取一遍, 但暂时想不到其他的办法了，不知道还有没有更好的方法呢！如果获取了所有的分页内容的话就不需要设置reserve-selection了。