当前位置: 首页 > news >正文

vue后台管理系统项目-table选择多行数据分页列表、一键全选重置功能

table选择多行数据

功能介绍:

1.列表分页功能;

2.一键全选,选中列表所有数据;

3.全选,选中当前页数据;

4.重置,清除选中状态;

5.列表搜索查询;

 效果:

 1.列表分页功能

<!-- 新建发送  船载终端 列表数据 -->
<el-table :data="newShipTableData" ref="newShipTableData" border highlight-current-row element-loading-text="拼命加载中"style="width: 100%;height:auto;" :header-cell-style="{textAlign: 'center',background:'#fafafa'}":cell-style="{ textAlign: 'center' }" @selection-change="newShipSelectionChange" :row-key="shipRowKey"><el-table-column type="selection" :reserve-selection="true" width="55" :selectable="newShipCheckSelectable"></el-table-column><el-table-column prop="shipName" label="船舶名称"></el-table-column><el-table-column prop="type" label="船舶类型"><template slot-scope="scope">{{scope.row.type == 1?'集装箱':'散货'}}</template></el-table-column><el-table-column prop="mmsi" label="MMSI"></el-table-column><el-table-column prop="tonnage" label="船舶吨位(t)"></el-table-column><el-table-column prop="draft" label="吃水(m)"></el-table-column><el-table-column prop="location" label="最后定位港口"></el-table-column><el-table-column prop="shipStatus" label="空船期"><template slot-scope="scope">{{scope.row.shipStatus == 0?'是':'否'}}</template></el-table-column>
</el-table>
<!-- 新建发送  船载终端 分页 -->
<el-row class='aic'><el-col :span='6' class='pt20'><!--一键全选/重置按钮--><el-checkbox label="一键全选" v-model="newShipCheckAll" @change="newShipCheck" border></el-checkbox><el-button @click='newShipResetCheck' class='ml20'>重置</el-button></el-col><el-pagination background @size-change="newShipSizeChange" @current-change="newShipCurrentChange":current-page="newCreatShipPagination.page" :page-sizes="[5, 10, 15, 20,25]":page-size="newCreatShipPagination.pageSize" layout="total, sizes, prev, pager, next, jumper":total="newCreatShipPagination.total"></el-pagination>
</el-row>  

注意事项:

 实现多选非常简单: 手动添加一个el-table-column,设type属性为selection即可;默认情况下若内容过多会折行显示,若需要单行显示可以使用show-overflow-tooltip属性,它接受一个Boolean,为true时多余的内容会在 hover 时以 tooltip 的形式显示出来。

 接口数据获取

// 新建 -- 船载终端 -- 获取表格数据getPushShipPageFun() {this.newShipRuleForm.pageNum = this.newCreatShipPagination.page;this.newShipRuleForm.pageSize = this.newCreatShipPagination.pageSize;getPushShipPage(this.newShipRuleForm).then(res => {if (res.code == 200) {// this.$refs.newShipRuleForm.resetFields();//清除console.log(res, "新建 -- 船载终端 -- 分页列表");this.newShipTableData = res.data.records;this.newCreatShipPagination.total = res.data.total;} else {this.$message.error("数据加载失败,请稍后再试");}}).catch(err => {console.log(err);});},

分页切换跳转

    // 新建 -- 船载终端 -- 选择一页几条数据newShipSizeChange(val) {this.newCreatShipPagination.pageSize = val;this.newCreatShipPagination.page = 1;this.getPushShipPageFun();},// 新建 -- 船载终端 -- 选择第几页newShipCurrentChange(val) {this.newCreatShipPagination.page = val;this.getPushShipPageFun();},

2.一键全选、全选

点击一键全选,是选中全部的数据;

具体实现:

<el-col :span='6' class='pt20'><!--一键全选/重置按钮--><el-checkbox label="一键全选" v-model="newShipCheckAll" @change="newShipCheck" border></el-checkbox><el-button @click='newShipResetCheck' class='ml20'>重置</el-button>
</el-col>
//data定义:newShipCheckAll:false,//船载终端

watch监听newShipTableData数据

watch: {// 分页全选-监听穿在终端表格数据变化 -- (点击了全选后--翻页仍然选中)newShipTableData: {handler(value) {if (this.newShipCheckAll) {this.newShipTableData.forEach(row => {if (row) {this.$refs.newShipTableData.toggleRowSelection(row, true);}});}},deep: true},
}

selection-change 当选择项发生变化时会触发该事件

// 新建 -- 船载终端 -- 全选回调newShipSelectionChange(val) {//    val表示当前选择行的 item 对象信息,全选为选中的所有 item 的数组集合console.log(val, "终端全选/反选val");this.shipSelection = val;//   选择船载终端的 集合this.shipMmsiList = this.shipSelection.map(item => {return {mmsi: item.mmsi,longitude:item.longitude,latitude:item.latitude,location:item.location }});// this.shipMmsiList = this.distinct(this.shipMmsiList);console.log(this.shipMmsiList, "选择船舶的mmsi集合");if (val.length == this.newShipLength) {this.newShipCheckAll = true;} else if (val.length == 0) {this.newShipCheckAll = false;}},
// 新建 -- 终端 --列表选择框 -- 翻页保留选中状态shipRowKey(row) {return row.shipId;console.log(row.shipId, "打印row.shipId");},

 selectable   仅对 type=selection 的列有效,类型为 Function,Function 的返回值用来决定这一行的 CheckBox 是否可以勾选;

    // 船载终端全选-全选时禁用选择框newShipCheckSelectable(row, index){return !this.newShipCheckAll;},

一键全选功能逻辑处理

toggleRowSelection   用于多选表格,切换某一行的选中状态,如果使用了第二个参数,则是设置这一行选中与否(selected 为 true 则选中);

clearSelection  用于多选表格,清空用户的选择;

    // 一键全选newShipCheck(){//请求 终端 列表数据this.getPushShipPageFun();if (this.newShipCheckAll) {this.newShipTableData.forEach(row => {if (row) {this.$refs.newShipTableData.toggleRowSelection(row, true);}});} else {this.$refs.newShipTableData.clearSelection();}},

3.重置

    // 船载终端重置newShipResetCheck(){this.$refs.newShipTableData.clearSelection();},

4.列表搜索查询

<el-col :span="8"><div class="grid-content bg-purple-light"><el-form-item><el-button type="primary" @click="newShipSubmitForm('newShipRuleForm')">查询</el-button><el-button @click="newShipResetForm('newShipRuleForm')">重置</el-button></el-form-item></div>
</el-col>

查询 

// 新建 -- 终端 -- 查询newShipSubmitForm(newShipRuleForm) {if(this.newShipRuleForm.minTonnage&&this.newShipRuleForm.maxTonnage){if(parseFloat(this.newShipRuleForm.minTonnage)>parseFloat(this.newShipRuleForm.maxTonnage)){this.$message.warning("船舶吨位错误");return;}}this.$refs[newShipRuleForm].validate(valid => {if (valid) {this.newCreatShipPagination.page = 1;this.getPushShipPageFun();} else {console.log("error submit!!");return false;}});},

重置 

    // 新建 -- 终端 -- 重置newShipResetForm(newShipRuleForm) {this.shipMmsiList = [];this.shipSelection=[];this.$refs.newShipTableData.clearSelection();//清除选择this.newShipRuleForm.shipStatus="";this.newCreatShipPagination.page = 1;this.$refs[newShipRuleForm].resetFields();this.newShipRuleForm.pageSize = this.newCreatShipPagination.pageSize;this.getPushShipPageFun();},

⭐️⭐️⭐️  作者船长在船上
🚩🚩🚩  主页:来访地址船长在船上的博客
🔨🔨🔨  简介CSDN前端领域博客专家,CSDN前端领域优质创作者,资深前端开发工程师,专注web前端领域开发,在CSDN分享工作中遇到的问题以及问题解决方法和对项目开发的实际案例总结以及新技术的认识。
————————————————
版权声明:本文为CSDN博主「船长在船上」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。

相关文章:

vue后台管理系统项目-table选择多行数据分页列表、一键全选重置功能

table选择多行数据 功能介绍&#xff1a; 1.列表分页功能&#xff1b; 2.一键全选&#xff0c;选中列表所有数据&#xff1b; 3.全选&#xff0c;选中当前页数据&#xff1b; 4.重置&#xff0c;清除选中状态&#xff1b; 5.列表搜索查询&#xff1b; 效果&#xff1a; 1.列表分…...

论文解读 | [CVPR2019] 基于自适应文本区域表示的任意形状场景文本检测

目录 1 研究背景及意义 2 总体设计 3 方法论 3.1 自适应文本区域表示 3.2 文本建议 3.3 建议改进 4 损失函数 5 实验及结果 1 研究背景及意义 现有的场景文本检测方法使用固定点数的多边形来 表示文本区域。例如&#xff0c;水平文本使用2个点(左上/右下)表示文本区域&…...

2月编程语言排行榜谁还没有看?

近日&#xff0c;TIOBE公布了2023年2月编程语言排行榜&#xff0c;本月各个语言表现如何&#xff1f;谁又摘得桂冠&#xff1f;一起来看看吧&#xff01; TIOBE 2月Top15编程语言&#xff1a; 详细榜单查看TIOBE官网 https://www.tiobe.com/tiobe-index/ 关注IT行业的小伙伴们…...

nginx.conf配置方法详细介绍

从前面的内容学习中&#xff0c;我们知道Nginx的核心配置文件默认是放在/usr/local/nginx/conf/nginx.conf&#xff0c;这一节&#xff0c;我们就来学习下nginx.conf的内容和基本配置方法。读取Nginx自带的Nginx配置文件&#xff0c;我们将其中的注释部分【学习一个技术点就是在…...

【微信小程序】一文带你吃透开发中的常用组件

写在前面 小程序中的组件也是由宿主环境提供的&#xff0c;开发者可以基于组件快速搭建出漂亮的页面结构。 官方把小程序的组件分为了9大类&#xff0c;分别是: 1.视图容器 2.基础内容 3.表单组件 4.导航组件 5.媒体组件 6.地图组件 7.画布组件 …...

Nginx 部署 Vue 项目以及 Vue 项目刷新出现 404 的问题(完整步骤)(亲测有效)

Nginx 部署 Vue 项目以及 Vue 项目刷新出现 404 的问题&#xff08;完整步骤&#xff09;&#xff08;亲测有效&#xff09; 1.流程步骤&#xff08;本教程下载的是1.20.2版本&#xff0c;放在D盘&#xff09; 1-1. 首先去官方下载 nginx &#xff0c;然后在当前目录下创建ht…...

leaflet 加载geojson数据,随机显示不同颜色的circleMarker

第086个 点击查看专栏目录 本示例的目的是介绍演示如何在vue+leaflet项目中加载geojson数据,随机显示不同颜色的circleMarker. 直接复制下面的 vue+leaflet源代码,操作2分钟即可运行实现效果 文章目录 示例效果配置方式示例源代码(共89行)相关API专栏目标示例效果 配置方式…...

UL grant的分配(LCP)

欢迎关注同名微信公众号“modem协议笔记”。 UE有UL data时&#xff0c;会发送BSR的告知网络侧自己详细的请求&#xff0c;期望网络能够如期下发UL grant&#xff0c;正常情况下网络侧会给UE足够的UL grant去发送UL data&#xff0c;整个过程都会比较顺利。UE收到UL grant后&a…...

真我air笔记本电脑怎么重装Win10系统?

真我air笔记本电脑怎么重装Win10系统&#xff1f;最近真我air笔记本电脑挺多用户购买的&#xff0c;因为这款电脑性价比比较高&#xff0c;适合学生和一些办公人员来使用。但是系统预制了Win11系统&#xff0c;有用户想要将系统重装到Win10来使用。那么如何去进行系统的重装呢&…...

【闲聊杂谈】深入剖析SpringCloud Alibaba之Nacos源码

Nacos核心功能点 服务注册 Nacos Client会通过发送REST请求的方式向Nacos Server注册自己的服务&#xff0c;提供自身的元数据&#xff0c;比如ip地址、端口等信息。Nacos Server接收到注册请求后&#xff0c;就会把这些元数据信息存储在一个双层的内存Map中&#xff1b; 服…...

MySQL删除或清空表内数据的方法

MySQL删除或清空表内数据的方法 一、使用MySQL清空表数据命令&#xff1a;truncate SQL语法为&#xff1a; truncate table 表名注意&#xff1a; truncate该命令会直接将数据表内数据清空&#xff1b;truncate该命令删除数据后会重置Identity&#xff08;标识列、自增字段…...

Android 权限(二): 动态权限讲解

1. 前言 继上一篇文章说到Android权限汇总, 请移步笔者的文章Android 权限(一)&#xff1a;权限大全_broadview_java的博客-CSDN博客_android 仅使用中允许权限 先要理清楚权限分类和定义,本篇文章继续说一下动态权限的申请和框架层的实现流程, 以及如何实现赋予系统应用默认的…...

【C++】2.类和对象(上)

1.面向过程和面向对象 C语言是面向过程的&#xff0c;关注的是过程&#xff0c;分析出求解问题的步骤&#xff0c;通过函数调用逐步解决问题。C是基于面向对象的&#xff0c;关注的是对象&#xff0c;将一件事情拆分成不同的对象&#xff0c;靠对象之间的交互完成。 2.类的引入…...

扬帆优配|3300点半日游!上证指数冲高回落;再迎重磅利好!

今天早盘&#xff0c;A股冲高回落&#xff0c;上证指数3300点得而复失&#xff0c;深证成指也于12000点无功而返。 盘面上&#xff0c;煤炭、钢铁、房地产、才智政务等板块涨幅居前&#xff0c;酿酒、酒店餐饮、日用化工、IT设备等板块跌幅居前。北上资金净流入7.77亿元。 房地…...

如何编写性能测试计划?一篇文章教你设计符合项目的性能测试计划

上篇文章&#xff0c;我们讲过性能测试计划&#xff0c;接下来我们就来讲讲如何设计符合项目的性能测试计划。到上篇为止&#xff0c;我们了解了性能测试计划中包含的内容&#xff0c;但是&#xff0c;这个颗粒度&#xff0c;我觉得作为一名测试经验不够丰富的性能工程师来说&a…...

第3章 Windows 下安装 Memcached教程

官网上并未提供 Memcached 的 Windows 平台install 包&#xff0c;咱们可以使用以下链接来download &#xff0c;需要根据自己的去下载&#xff1a; 点击下载 在 1.4.5 版本以前 memcached 可以作为一个服务install &#xff0c;而在 1.4.5 及之后的版本删除了该功能。因此咱…...

RXjava中的操作符

要使用Rxjava首先要导入两个包&#xff0c;其中rxandroid是rxjava在android中的扩展 implementation io.reactivex:rxandroid:1.2.1implementation io.reactivex:rxjava:1.2.0Rxjava中的操作符 创建型操作符 interval 创建一个按固定时间间隔发射整数序列的Observable&#xf…...

前端页面jquery规范写法

使用最新版本的 jQuery 最新版本的 jQuery 会改进性能和增加新功能,若不是为了兼容旧浏览器,建议使用最新版本的 jQuery。以下是三条常见的 jQuery 语句,版本越新,性能越好: $(.elem) $(.elem, context) context.find(.elem) 结果 1.6.2 版执行次数远超两个老版本。 jQ…...

【HEC-RAS水动力】HEC-RAS 1D基本原理(恒定流及非恒定流)

一、数据说明 HEC-RAS模型主要由工程文件 (.prj) 文 件 、 河道地形数据文件 ( .g01)、运行文件(p01)、非恒定流文件 ( .u01) 等部分组成。 1. 一般数据 在创建并保存project文件(*.prj)后,其他data文件均会自动以同样的名字保存,但采用不同的后缀来区分各类文件。 &qu…...

2.Gin内容介绍

目录 参考 主要内容 关于Web 创建项目 为什么要用框架 Gin框架介绍 Gin框架安装与使用 安装 第一个Gin示例&#xff1a; RESTful API Gin渲染 HTML渲染 自定义模板函数 静态文件处理 使用模板继承 补充文件路径处理 JSON渲染 XML渲染 YMAL渲染 protobuf渲染…...

AI-调查研究-01-正念冥想有用吗?对健康的影响及科学指南

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; &#x1f680; AI篇持续更新中&#xff01;&#xff08;长期更新&#xff09; 目前2025年06月05日更新到&#xff1a; AI炼丹日志-28 - Aud…...

springboot 百货中心供应链管理系统小程序

一、前言 随着我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机进行数据信息管理&#xff0c;对于手机的各种软件也是备受用户的喜爱&#xff0c;百货中心供应链管理系统被用户普遍使用&#xff0c;为方…...

K8S认证|CKS题库+答案| 11. AppArmor

目录 11. AppArmor 免费获取并激活 CKA_v1.31_模拟系统 题目 开始操作&#xff1a; 1&#xff09;、切换集群 2&#xff09;、切换节点 3&#xff09;、切换到 apparmor 的目录 4&#xff09;、执行 apparmor 策略模块 5&#xff09;、修改 pod 文件 6&#xff09;、…...

1688商品列表API与其他数据源的对接思路

将1688商品列表API与其他数据源对接时&#xff0c;需结合业务场景设计数据流转链路&#xff0c;重点关注数据格式兼容性、接口调用频率控制及数据一致性维护。以下是具体对接思路及关键技术点&#xff1a; 一、核心对接场景与目标 商品数据同步 场景&#xff1a;将1688商品信息…...

Java多线程实现之Callable接口深度解析

Java多线程实现之Callable接口深度解析 一、Callable接口概述1.1 接口定义1.2 与Runnable接口的对比1.3 Future接口与FutureTask类 二、Callable接口的基本使用方法2.1 传统方式实现Callable接口2.2 使用Lambda表达式简化Callable实现2.3 使用FutureTask类执行Callable任务 三、…...

C# 类和继承(抽象类)

抽象类 抽象类是指设计为被继承的类。抽象类只能被用作其他类的基类。 不能创建抽象类的实例。抽象类使用abstract修饰符声明。 抽象类可以包含抽象成员或普通的非抽象成员。抽象类的成员可以是抽象成员和普通带 实现的成员的任意组合。抽象类自己可以派生自另一个抽象类。例…...

【C语言练习】080. 使用C语言实现简单的数据库操作

080. 使用C语言实现简单的数据库操作 080. 使用C语言实现简单的数据库操作使用原生APIODBC接口第三方库ORM框架文件模拟1. 安装SQLite2. 示例代码:使用SQLite创建数据库、表和插入数据3. 编译和运行4. 示例运行输出:5. 注意事项6. 总结080. 使用C语言实现简单的数据库操作 在…...

Linux C语言网络编程详细入门教程:如何一步步实现TCP服务端与客户端通信

文章目录 Linux C语言网络编程详细入门教程&#xff1a;如何一步步实现TCP服务端与客户端通信前言一、网络通信基础概念二、服务端与客户端的完整流程图解三、每一步的详细讲解和代码示例1. 创建Socket&#xff08;服务端和客户端都要&#xff09;2. 绑定本地地址和端口&#x…...

【Linux系统】Linux环境变量:系统配置的隐形指挥官

。# Linux系列 文章目录 前言一、环境变量的概念二、常见的环境变量三、环境变量特点及其相关指令3.1 环境变量的全局性3.2、环境变量的生命周期 四、环境变量的组织方式五、C语言对环境变量的操作5.1 设置环境变量&#xff1a;setenv5.2 删除环境变量:unsetenv5.3 遍历所有环境…...

windows系统MySQL安装文档

概览&#xff1a;本文讨论了MySQL的安装、使用过程中涉及的解压、配置、初始化、注册服务、启动、修改密码、登录、退出以及卸载等相关内容&#xff0c;为学习者提供全面的操作指导。关键要点包括&#xff1a; 解压 &#xff1a;下载完成后解压压缩包&#xff0c;得到MySQL 8.…...