vue 翻页选择导出

news2024/11/25 4:22:17

框架Vue2.15.14,后台是Aps.net core Api

<el-table ref="multipleTable" :data="tableData" tooltip-effect="light" style="width: 100%;text-align: center;"
            height="400" show-harder @selection-change="handleSelectionChange" border :header-cell-style="{ textAlign: 'center' }" :row-key="getRowKey">
            <el-table-column type="selection" width="50" prop="id" :reserve-selection="true" style="text-align:center">
            </el-table-column>
        </el-table>

重点是el-table:@selection-change="handleSelectionChange"

:row-key="getRowKey"

首列selection 的 :reserve-selection="true" 能够实现界面翻页显示选中

Vue.js

export default {
name: 'DlgGarbageBox',
data() {
        return {
            HandleState: [],
            dataPageIsLoading: false, // 数据分页列表是否加载中
            searchParam: {
                status: "",
                key: "",
                pageIndex: 1,
                pageSize: 10,
                orderColumn: null,
                orderBy: null,
                admin_lettr_ids:""
            },
            dataTotal: 0,
            tableData: [],
            currentrow: "",
            multipleSelection: "",
            selectArr:[],
        }
    },
methods: {
getRowKey(row) {
            return row.id;
        },
/**
         * 获取分页列表 查询
         */
        getPage() {
            this.dataPageIsLoading = true;
            this.$store.dispatch('getAdminLetterPage', this.searchParam).then((res) => {
                this.tableData = res.list;
                this.dataTotal = res.total;

                this.dataPageIsLoading = false;
            });
        },
handleSelectionChange(rows) {
            this.multipleSelection = rows;//每次选择的数据
            if (rows.length == 0) this.selectArr = [];
            else {
                //每次选择的数据存起来
                rows.forEach(row => {
                    if (row) {
                        if (this.selectArr.indexOf(row.id) == -1)
                            this.selectArr.push(row.id);
                    }
                });
            }
            console.log(this.selectArr);
        },
//导出
        exportAdminLetter(){
            console.log(this.selectArr);
            this.searchParam.admin_lettr_ids=this.selectArr.join(',');
            let request = {
                ...this.searchParam
            }

            this.isRequesting = true;

            this.$store.dispatch('exportAdminLetter', request).then(
                res => {
                    this.isRequesting = false;
                    this.searchParam.admin_lettr_ids="";
                    this.selectArr=[];
                    this.$refs.multipleTable.clearSelection();
                },
                err => {
                    this.isRequesting = false;
                }
            );
        },
    }
}

效果图:

不管怎么翻选择的依然都选中,点击导出 参数是选中的三条数据:

这样就实现了翻页选中导出

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1009650.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Android Studio 报错问题记录

工具地址 由于之前手贱不知道点了一个什么东西更新&#xff0c;导致一个code1报错&#xff0c;后来又一通瞎比操作直接吧Android Studio弄得打不开模拟器了&#xff0c;所以我后面就全部卸载重新安装了一下&#xff0c;并把之前遇到的问题做下记录&#xff0c;可能并不适用于每…

朗思科技数字员工通过统信桌面操作系统兼容性互认认证

近日&#xff0c;朗思科技数字员工与统信桌面操作系统V20进行了兼容互认&#xff0c;针对上述产品的功能、兼容性方面&#xff0c;通过共同严格测试表明——朗思科技数字员工在统信桌面操作系统 V20上整体运行稳定&#xff0c;满足功能及兼容性测试要求。 北京朗思智能科技有限…

PostgreSQL 数据定义语言 DDL

文章目录 表创建主键约束非空唯一约束检查约束外键约束默认值约束 触发器表空间构建表空间 视图索引索引的基本概念索引的分类创建索引 物化视图 表创建 PostgreSQL表的构建语句与所有数据库都一样&#xff0c;结构如下&#xff0c;其核心在于构建表时&#xff0c;要指定上一些…

Composition API的优势

1.Options API存在的问题 传统的options api 中&#xff0c;新增或修改一个需求&#xff0c;就需要分别在data,methods,computed里面修改 2.Composition API的优势 我们可以在组织我们的代码&#xff0c;函数。让相关功能的代码更加有序的组织在一起。

openpnp - 设备电源抗干扰部件的选择

文章目录 openpnp - 设备电源抗干扰部件的选择概述END openpnp - 设备电源抗干扰部件的选择 概述 设备电源部分的干扰主要来自伺服和真空泵. 伺服是设备开机期间, 一直供电, 采用滤波器比较好. 型号为 CW4L2-10A-S(004)或者CW4-10A-S(004) CW4L2-10A-S(004)是二级滤波. CW4-1…

Spring的 webFlux 和 webMVC

看到一个测评文章&#xff0c;并发在300的时候webMVC 和 webFlux的处理能力不相上下&#xff0c; 当并发达到3000的时候, webFlux明显优于webMVC, 有图有真相&#xff0c; 我信了. webMVC 是 one-request-one thread 堵塞模式, flux是非阻塞模式&#xff0c; 是spring家族系列…

大神教你期权平仓操作技巧,期权交易规则一网打尽

期权交易主要是看涨开仓和看跌开仓&#xff0c;平仓就是盈亏或亏损平仓。期权的波动较快&#xff0c;所以开仓平仓也一定比较频繁。具体交易和期货的开仓和平仓都是一样的。期货是买涨、卖跌&#xff0c;期权是看涨、看跌。下文介绍期权如何平仓操作&#xff1f;本文来自&#…

系统架构设计师-数据库系统(1)

目录 一、数据库模式 1、集中式数据库 2、分布式数据库 二、数据库设计过程 1、E-R模型 2、概念结构设计 3、逻辑结构设计 三、关系代数 1、并交差 2、投影和选择 3、笛卡尔积 4、自然连接 一、数据库模式 1、集中式数据库 三级模式&#xff1a; &#xff08;1&#xff09;外…

一文讲解ARMv8内存属性与类型(Memory types and attributes)简介

ARMv8中将内存分为两种类型&#xff1a;Normal memory和Device memory&#xff0c;Normal memory适用于系统中的大部分内存&#xff0c;而Device memory则适用于外设所使用的内存。 1. Normal Memory Normal memory类型属性适用于系统中的大多数内存。它表示架构允许硬件对这…

《动手学深度学习 Pytorch版》 4.10 实战Kaggle比赛:预测比赛

4.10.1 下载和缓存数据集 import hashlib import os import tarfile import zipfile import requests#save DATA_HUB dict() DATA_URL http://d2l-data.s3-accelerate.amazonaws.com/def download(name, cache_diros.path.join(.., data)): #save"""下载一个…

湖北建筑行业建安C证交安C证水安C证报考介绍

湖北建筑行业建安C证交安C证水安C证报考介绍 湖北三类人员分为建设厅安全员C证、交通厅安全员C证、水利厅安全员C证&#xff0c;对应着建筑施工行业、公路工程行业、建筑水利行业等等。 湖北建设厅安全员C证&#xff08;建安C&#xff09; 湖北建筑安管考核管理系统-湖北建安…

JUC相关面试题

&#x1f44f;作者简介&#xff1a;大家好&#xff0c;我是爱发博客的嗯哼&#xff0c;爱好Java的小菜鸟 &#x1f525;如果感觉博主的文章还不错的话&#xff0c;请&#x1f44d;三连支持&#x1f44d;一下博主哦 &#x1f4dd;社区论坛&#xff1a;希望大家能加入社区共同进步…

亲测好用-obsidian无法打开插件库安装或更新的解决办法-结合FastGithub

写在前面 经过半年左右时间的使用情况验证该方案稳定可靠。 方案&#xff1a;插件“Plugin Proxy” 软件“FastGithub” 效果&#xff1a; 插件“Plugin Proxy” 下载地址&#xff1a; https://github.com/gslnzfq/obsidian-proxy-server 插件安装&#xff1a; 插件设置为…

虚拟人三维动画宣传片案例分享 | 广州“五羊”城市文化IP商业体裸眼3D广告影片

随着时代的发展元宇宙的助推&#xff0c;裸眼3D形式的宣传方式逐渐出现在大众眼前。以数字人IP的3D立体效果吸引大众目光&#xff0c;让其驻足拍照、录视频分享至社交平台&#xff0c;为企业品牌带来高频传播价值。 近日&#xff0c;广州“五羊”城市文化IP裸眼3D广告宣传片在广…

设计模式解析之模板方法模式:设计灵活可扩展的算法框架

目录 1. 引言2. 概要2.1 概念2.2 结构2.3 类图2.4 工作流程 3. 应用场景3.1 适用情况&#xff1a;3.2 常见例子&#xff1a; 4. 代码衍化过程初版&#xff1a;甲乙学生都抄试卷第二版&#xff1a;提炼代码第三版&#xff1a;抽象出算法骨架第四版&#xff1a;模板方法变化过程总…

视频转gif的几个方法

视频转gif的软件&#xff0c;视频转gif的几个方法~什么是gif图&#xff1f;其实简单一点来说就是一张会动的图片&#xff0c;gif既有图片的属性&#xff0c;也具有视频的特点&#xff0c;因为严格来说gif属于一直图片文件的特殊&#xff0c;但是它的展现方式又和视频非常的像。…

【计算机视觉 | 图像模型】常见的计算机视觉 image model(CNNs Transformers) 的介绍合集(二)

文章目录 一、SqueezeNet二、Inception-v3三、Visual Geometry Group 19 Layer CNN四、MobileNetV1五、Data-efficient Image Transformer六、MobileNetV3七、self-DIstillation with NO labels&#xff08;DINO&#xff09;八、MLP-Mixer九、WideResNet十、Darknet-19十一、HR…

普通项目(java项目)使用lombok报错

java: JPS incremental annotation processing is disabled. Compilation results on partial recompilation may be inaccurate. Use build process "jps.track.ap.dependencies" VM flag to enable/disable incremental annotation processing environment. 解决方…

【ROS】机器人使用Nomachine进行远程控制

官网&#xff1a;NoMachine - Free Remote Desktop for Everybody 支持的系统&#xff1a; WindowsMacLinux 树莓派其他ARM板IOSAndroid 由于网速问题&#xff0c;可以使用我下载好的&#xff1a;&#xff08;8.8.1_1&#xff09; 链接&#xff1a;https://pan.baidu.com/s/…

CSS 修改el-calendar的样式,自定义样式

需求&#xff1a;自定义elementui的日历的样式&#xff1b;给符合条件的时间展示红点。 elementui的原始样式&#xff1a; 目标样式&#xff1a; 代码实现&#xff1a; html: <el-calendar v-model"calendarValue"><template slot"dateCell" …