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

vue2版本elementUI的table分页实现多选逻辑

1. 需求

我们需要在表格页上实现多选要求,该表格支持分页逻辑。

2. 认识属性

表格属性

参数说明类型可选值默认值
data显示的数据array
row-key行数据的 Key,用来优化 Table 的渲染;在使用 reserve-selection 功能与显示树形数据时,该属性是必填的。类型为 String 时,支持多层访问:user.info.id,但不支持 user.info[0].id,此种情况请使用 Function。Function(row)/String

表格事件

事件名说明参数
selection-change当选择项发生变化时会触发该事件selection

表格方法

方法名说明参数
clearSelection用于多选表格,清空用户的选择
toggleRowSelection用于多选表格,切换某一行的选中状态,如果使用了第二个参数,则是设置这一行选中与否(selected 为 true 则选中)row, selected
toggleAllSelection用于多选表格,切换所有行的选中状态-

表格列属性

参数说明类型可选值默认值
type对应列的类型。如果设置了 selection 则显示多选框;如果设置了 index 则显示该行的索引(从 1 开始计算);如果设置了 expand 则显示为一个可展开的按钮stringselection/index/expand
selectable仅对 type=selection 的列有效,类型为 Function,Function 的返回值用来决定这一行的 CheckBox 是否可以勾选Function(row, index)
reserve-selection仅对 type=selection 的列有效,类型为 Boolean,为 true 则会在数据更新之后保留之前选中的数据(需指定 row-key)Booleanfalse

3. 具体代码

<template>
<div><el-tablev-if="tableVisible"ref="multipleTable":data="tableData"tooltip-effect="dark"style="width: 100%"row-key="id"@selection-change="handleSelectionChange"><el-table-column:reserve-selection="true":selectable="judgeSelectable"type="selection"width="55"></el-table-column><el-table-columnlabel="id"width="120"><template slot-scope="scope">{{ scope.row.date }}</template></el-table-column><el-table-columnprop="name"label="姓名"width="120"></el-table-column></el-table><el-pagination:current-page="pageNum":page-sizes="[10, 20, 50, 100]":page-size="pageSize"layout="total,  prev, pager, next, sizes, jumper":total="total"@size-change="handleSizeChange"@current-change="handleCurrentChange"/>
</div>
</template>
  export default {data() {return {tableData: [{id: 1,name: '王小虎1'}, {id: 2,name: '王小虎2'}, {id: 3,name: '王小虎3'}, {id: 4,name: '王小虎4'}, {id: 5,name: '王小虎5'}, {id: 6,name: '王小虎6'}, {id: 7,name: '王小虎7'}],multipleSelection: [],total: 0,pageSize: 10,pageNum: 1,tableVisible: true}},created() {this.initData();},methods: {initData() {this.getList();this.getSelectedList();},getSelectedList() {//	当拿到已选列表时,调用toggleSelection传入已选列表},judgeSelectable(row, index) {// 用来区分是否可选return Math.random() > 0.5;},toggleSelection(rows) {if (rows) {rows.forEach(row => {this.$refs.multipleTable.toggleRowSelection(row);});} else {this.$refs.multipleTable.clearSelection();}},handleSelectionChange(val) {this.multipleSelection = val;},getList() {//	获取数据,更新tableData和total},//  分页size变化handleSizeChange(val) {this.pageSize = val;this.getList();},//  当前页面变化handleCurrentChange(val) {this.pageNum = val;this.getList();},//	必须这么处理toggleSelection(rows) {if (rows) {rows.forEach(row => {this.$refs.multipleTable.toggleRowSelection(row);});} else {this.$refs.multipleTable.clearSelection();}},//	批量导入或者其他场景下已选数据已更新,就重新处理下页面内容regetData() {this.total = 0;this.pageNum = 1;this.tableData = [];this.multipleSelection = [];this.tableVisible = false;this.$nextTick(() => {this.tableVisible = true;this.initData();})}}}

4. 解读

分页不需要介绍,主要还是多选说一点。

  1. 表格上必须设置row-key,该字段的值不可重复,这样让表格记住每个数据。
  2. selection-change字段用来监听选择变化,因el-table未提供批量选中方法,故只能调组件上的toggleRowSelection方法一个一个选中。如果需要监听selection-change方法变更记录,最好还是防抖处理,避免初始化一个一个选中导致的数据异常。
  3. el-table-column 使用 type 值为 selection, 该组件上需要设置 reserve-selectiontrue,相关属性解说请看2中解释。属性selectable 则是用来控制是否可选,这个业务功能也要了解下。
  4. 至于具体逻辑可以参考上面代码,有问题来找我。
求关注
在这里插入图片描述

相关文章:

vue2版本elementUI的table分页实现多选逻辑

1. 需求 我们需要在表格页上实现多选要求&#xff0c;该表格支持分页逻辑。 2. 认识属性 表格属性 参数说明类型可选值默认值data显示的数据array——row-key行数据的 Key&#xff0c;用来优化 Table 的渲染&#xff1b;在使用 reserve-selection 功能与显示树形数据时&…...

AI数字人技术源码开发分享:革新短视频营销策略

集星幻影的AI数字人分身系统是一款融合了先进人工智能技术的综合性短视频营销解决方案。该系统整合了形象克隆、声音克隆、AI数字人分身生成、智能剪辑及文案创作等功能&#xff0c;旨在为用户打造虚拟人物资产并提供AI驱动的多模态交互服务。以下是该系统的主要功能概述&#…...

实验环境搭建集锦(docker linux ros2+强化学习环境+linux上单片机串口调试)

为了记住一些实验环境配置开的文章&#xff0c;边配置边记&#xff0c;免得之后忘了。 Docker环境搭建 yay -S docker //下载docker docker info //查看docker配置 sudo systemctl start docker //系统配置打开docker sudo systemctl enable docker //系统配置后台开启d…...

sql调优之数据库开发规范

数据库 数据库开发规范 也可用于PostgreSQL以及兼容PG的数据库 通用命名规则 【强制】 本规则适用于所有对象名&#xff0c;包括&#xff1a;库名、表名、列名、函数名、视图名、序列号名、别名等。 【强制】 对象名务必只使用小写字母&#xff0c;下划线&#xff0c;数字&…...

《Effective Objective-C》阅读笔记(上)

目录 高质量iOS之熟悉OC 了解OC语言的起源 在类的头文件中尽量少引入其他头文件 多用字面语法&#xff0c;少用与之等价的方法 字面数值 字面量数组 字面量字典 局限性 多用类型常量&#xff0c;少用#define预处理指令 用枚举表示状态、选项、状态码 高质量iOS之对象…...

ClkLog里程碑:荣获2024上海开源技术应用创新竞赛三等奖

2024年10月&#xff0c;ClkLog团队参加了由上海计算机软件技术开发中心、上海开源信息技术协会联合承办的2024上海数智融合“智慧工匠”选树、“领军先锋”评选活动——开源技术应用创新竞赛。我们不仅成功晋级决赛&#xff0c;还荣获了三等奖&#xff01;这一成就不仅是对ClkL…...

【数据结构进阶】哈希表

&#x1f31f;&#x1f31f;作者主页&#xff1a;ephemerals__ &#x1f31f;&#x1f31f;所属专栏&#xff1a;数据结构 目录 前言 一、哈希表的概念 二、哈希函数的实现方法 1. 直接定址法 2. 除留余数法 三、哈希冲突 1. 开放定址法&#xff08;闭散列&#xff0…...

STM32内存五区及堆栈空间大小设置(启动文件浅析)

前言 嘿&#xff0c;朋友们&#xff01;今天咱们来聊聊STM32的内存五区和堆栈空间大小设置。这可是嵌入式开发里的“必修课”&#xff0c;要是没整明白&#xff0c;程序说不定就“翻车”了。别担心&#xff0c;我这就带你一步步搞懂这事儿&#xff0c;让你轻松上手&#xff0c…...

微信小程序调用火山方舟(字节跳动火山引擎)中的DeepSeek大模型

微信小程序的轻量化特性与DeepSeek大模型的AI能力结合&#xff0c;可快速构建智能问答、内容生成等场景化服务。通过火山方舟平台提供的标准化接口&#xff0c;开发者无需深入算法细节即可调用模型能力。 一、注册火山引擎账号&#xff0c;创建API Key和model&#xff08;接入…...

(八)Java-Collection

一、Collection接口 1.特点 Collection实现子类可以存放多个元素&#xff0c;每个元素可以是Object&#xff1b; 有些Collection的实现类&#xff0c;可以存放重复的元素&#xff0c;有些不可以&#xff1b; 有些Collection的实现类&#xff0c;有些是有序的&#xff08;Li…...

从单片机的启动说起一个单片机到点灯发生了什么下——使用GPIO点一个灯

目录 前言 HAL库对GPIO的抽象 核心分析&#xff1a;HAL_GPIO_Init 前言 我们终于到达了熟悉的地方&#xff0c;对GPIO的初始化。经过漫长的铺垫&#xff0c;我们终于历经千辛万苦&#xff0c;来到了这里。关于GPIO的八种模式等更加详细的细节&#xff0c;由于只是点个灯&am…...

C++ | 哈希表

前言 &#x1f493; 个人主页&#xff1a;普通young man-CSDN博客 ⏩ 文章专栏&#xff1a;C_普通young man的博客-CSDN博客 ⏩ 本人giee: 普通小青年 (pu-tong-young-man) - Gitee.com 若有问题 评论区见&#x1f4dd; &#x1f389;欢迎大家点赞&#x1f44d;收藏⭐文章 —…...

leetcode_动态规划/递归 70. 爬楼梯

70. 爬楼梯 假设你正在爬楼梯。需要 n 阶你才能到达楼顶。 每次你可以爬 1 或 2 个台阶。你有多少种不同的方法可以爬到楼顶呢&#xff1f; 思路&#xff1a; 考虑: 假设现在已经爬到了某一阶台阶&#xff0c;那是如何到达这里的呢&#xff1f;可能是从前一阶台阶爬上来的&am…...

基于Rook的Ceph云原生存储部署与实践指南(上)

#作者&#xff1a;任少近 文章目录 1 Ceph环境准备2 rook部署ceph群集2.1 Rook 帮助地址2.2 安装ceph2.3 获取csi镜像2.4 Master参加到osd2.5 设置默认存储 3 Rook部署云原生RBD块存储3.1 部署storageclass资源3.2 部署WordPress使用RBD3.3 WordPress访问 4 Rook部署云原生RGW…...

C++ Qt常见面试题(4):Qt事件过滤器

在 Qt 中,事件过滤器(Event Filter)提供了一种机制,可以拦截并处理对象的事件(如鼠标事件、键盘事件等),在事件到达目标对象之前对其进行预处理。事件过滤器通常用于以下场景: 捕获和处理特定的事件(如鼠标点击、按键等);对事件进行筛选或修改;实现全局的事件监听功…...

regionserver实例僵住问题分析

问题现象: 应用提交超时,发现regionserver实例异常。hbase原生页面这个实例dead,业务连接到这个rs的进程超时8个regionserver实例。 D08在18:30分后显示warning,应用提交任务到这个rs节点超时,hbase控制台不显示d08的rs信息了。19:30在页面停止rs实例失败,然后kill进程…...

服务器离线部署DeepSeek

目标 本次部署的目标是在本地服务器上部署DeepSeek。但是该服务不能连接外网&#xff0c;因此只能使用离线部署的方式。为了一次完成部署。现在云服务器上进行尝试。 云服务器部署尝试 云服务器配置 CentOS72080Ti 11GB 安装准备 1、上传iso并配置为本地yum源 安装前先将…...

QT mac系统下qml实现的菜单栏,标准快捷键Delete无作用或失灵的处理

一.在mac系统下,QT官方提供的删除快捷键无作用。 1.下面这一段代码,最后一个menuItem采用的是QT自带的标准快捷键,但是在使用的过程中,快捷键无响应。大家可以将代码带入简单的demo尝试一下: MenuBar {id: rootMenu {id: editMenutitle: TransText.titleBar_EditMenuItem…...

redis序列化设置

redis序列化设置 redis序列化设置序列化对象里有org.joda.time.DateTime1&#xff09;、报错内容如下2&#xff09;、解决方案&#xff1a;分别自定义时间的序列化和反序列化&#xff0c;以对象形式关联到redisTemplate redis序列化设置 redis序列化设置&#xff0c;通过自定义…...

浅谈C++/C命名冲突

前言 在这里我会简要地介绍产生命名冲突的原因&#xff0c;和C中处理命名冲突的方法&#xff0c;同时和C语言的解决办法进行比较。 相信你在阅读完之后一定会有收获。对于我们来说&#xff0c;了解编译器的编译链接过程才能更好的理解编译器是如何报错的&#xff0c;更能让我们…...

从零实现富文本编辑器#5-编辑器选区模型的状态结构表达

先前我们总结了浏览器选区模型的交互策略&#xff0c;并且实现了基本的选区操作&#xff0c;还调研了自绘选区的实现。那么相对的&#xff0c;我们还需要设计编辑器的选区表达&#xff0c;也可以称为模型选区。编辑器中应用变更时的操作范围&#xff0c;就是以模型选区为基准来…...

鱼香ros docker配置镜像报错:https://registry-1.docker.io/v2/

使用鱼香ros一件安装docker时的https://registry-1.docker.io/v2/问题 一键安装指令 wget http://fishros.com/install -O fishros && . fishros出现问题&#xff1a;docker pull 失败 网络不同&#xff0c;需要使用镜像源 按照如下步骤操作 sudo vi /etc/docker/dae…...

【python异步多线程】异步多线程爬虫代码示例

claude生成的python多线程、异步代码示例&#xff0c;模拟20个网页的爬取&#xff0c;每个网页假设要0.5-2秒完成。 代码 Python多线程爬虫教程 核心概念 多线程&#xff1a;允许程序同时执行多个任务&#xff0c;提高IO密集型任务&#xff08;如网络请求&#xff09;的效率…...

AI,如何重构理解、匹配与决策?

AI 时代&#xff0c;我们如何理解消费&#xff1f; 作者&#xff5c;王彬 封面&#xff5c;Unplash 人们通过信息理解世界。 曾几何时&#xff0c;PC 与移动互联网重塑了人们的购物路径&#xff1a;信息变得唾手可得&#xff0c;商品决策变得高度依赖内容。 但 AI 时代的来…...

sipsak:SIP瑞士军刀!全参数详细教程!Kali Linux教程!

简介 sipsak 是一个面向会话初始协议 (SIP) 应用程序开发人员和管理员的小型命令行工具。它可以用于对 SIP 应用程序和设备进行一些简单的测试。 sipsak 是一款 SIP 压力和诊断实用程序。它通过 sip-uri 向服务器发送 SIP 请求&#xff0c;并检查收到的响应。它以以下模式之一…...

C/C++ 中附加包含目录、附加库目录与附加依赖项详解

在 C/C 编程的编译和链接过程中&#xff0c;附加包含目录、附加库目录和附加依赖项是三个至关重要的设置&#xff0c;它们相互配合&#xff0c;确保程序能够正确引用外部资源并顺利构建。虽然在学习过程中&#xff0c;这些概念容易让人混淆&#xff0c;但深入理解它们的作用和联…...

【网络安全】开源系统getshell漏洞挖掘

审计过程&#xff1a; 在入口文件admin/index.php中&#xff1a; 用户可以通过m,c,a等参数控制加载的文件和方法&#xff0c;在app/system/entrance.php中存在重点代码&#xff1a; 当M_TYPE system并且M_MODULE include时&#xff0c;会设置常量PATH_OWN_FILE为PATH_APP.M_T…...

基于PHP的连锁酒店管理系统

有需要请加文章底部Q哦 可远程调试 基于PHP的连锁酒店管理系统 一 介绍 连锁酒店管理系统基于原生PHP开发&#xff0c;数据库mysql&#xff0c;前端bootstrap。系统角色分为用户和管理员。 技术栈 phpmysqlbootstrapphpstudyvscode 二 功能 用户 1 注册/登录/注销 2 个人中…...

论文阅读:LLM4Drive: A Survey of Large Language Models for Autonomous Driving

地址&#xff1a;LLM4Drive: A Survey of Large Language Models for Autonomous Driving 摘要翻译 自动驾驶技术作为推动交通和城市出行变革的催化剂&#xff0c;正从基于规则的系统向数据驱动策略转变。传统的模块化系统受限于级联模块间的累积误差和缺乏灵活性的预设规则。…...

区块链技术概述

区块链技术是一种去中心化、分布式账本技术&#xff0c;通过密码学、共识机制和智能合约等核心组件&#xff0c;实现数据不可篡改、透明可追溯的系统。 一、核心技术 1. 去中心化 特点&#xff1a;数据存储在网络中的多个节点&#xff08;计算机&#xff09;&#xff0c;而非…...