Vue3中el-table组件实现分页,多选以及回显

el-table组件实现分页,多选以及回显

    • 需求
    • 思路
      • 1、实现分页多选并保存上一页的选择
      • 2、记录当前选择的数据
      • 3、默认数据的回显
    • 完整代码

需求

  1. 使用 dialog 显示 table,同时关闭时销毁
  2. el-table 表格多选
  3. 回显已选择的表格数据,分页来回切换依然正确显示数据
  4. 点击取消,数据回到初始化勾选状态

思路

1、实现分页多选并保存上一页的选择

分别添加以下属性
Table 属性
在这里插入图片描述
Table-column 属性
在这里插入图片描述

<el-table ref="tableRef" row-key="id" @selection-change="handlechange"><el-table-column type="selection" :reserve-selection="true" align="center" />
</el-table>

2、记录当前选择的数据

定义 el-table 的 selection-change 事件回调函数

const handlechange = (val: any[]) => {selected.value = val
}

前两步已经能满足不需要回显的分页多选功能,但是要实现数据的回显还需要以下处理。

3、默认数据的回显

假设定义两个响应式数组表示默认选择和当前选择

// 默认选中列表
const defaultSelected = ref<any[]>([])
// 当前选中的列表
const selected = ref<any[]>([])
// 通过 selection-change 事件回调保存当前选择的数据
const handlechange = (val: any[]) => {selected.value = val
}

在显示弹窗方法里通过 el-table 中的 toggleRowSelection 方法初始化选中所有默认选项(注意是所有的选项,而不只是当前页的选项),如果只选择当前页的默认选项,selected 将会丢失其他默认选项

// 显示表格弹窗
const showDialog = () => {getTableList()setTimeout(() => {for (const item of defaultSelected.value) tableRef.value.toggleRowSelection(item, true) // 选中默认选中的行}, 0)visible.value = true
}

至此实现了所有功能,总结一下原理就是 el-table 通过 row-key 来判断是否已选择,所以通过 toggleRowSelection 选择所有默认的选项,不管点击哪一页都会正确回显数据,并且定义了 handlechange 会保存新的改变

如果每次确认后不销毁 table 组件,需要调用 clearSelection 方法清空所有已选项

const handleClick = () => {// 保存新的数据defaultSelected.value = cloneDeep(selected.value)selected.value.length = 0pagination.currentPage = 1// 清空表格已选项tableRef.value.clearSelection()visible.value = false
}

完整代码

记录下代码,互相学习提提意见

<script setup lang="tsx">
import { useI18n } from '@/hooks/web/useI18n'
import { getTableListApi } from '@/api/table'
import { TableData } from '@/api/table/types'
import { ref, reactive, watch } from 'vue'
import { ElTableColumn, ElTable, ElPagination, ElButton, ElDialog } from 'element-plus'
import { cloneDeep } from 'lodash-es'const { t } = useI18n()const columns: any[] = [{type: 'selection',width: 60,align: 'center'},{field: 'title',label: t('tableDemo.title')},{field: 'author',label: t('tableDemo.author')},{field: 'display_time',label: t('tableDemo.displayTime'),sortable: true},{field: 'importance',label: t('tableDemo.importance')},{field: 'pageviews',label: t('tableDemo.pageviews')}
]const loading = ref(true)const visible = ref(false)const pagination = reactive({currentPage: 1, // 当前页数pageSize: 10, // 每页显示条数pageSizes: [10, 20, 30, 40, 50], // 每页显示个数选择器的选项设置total: 100 // 总条数
})const tableDataList = ref<TableData[]>([])const tableRef = ref<any>()// 默认选中列表
const defaultSelected = ref<any[]>([])// 当前选中的列表
const selected = ref<any[]>([])const getTableList = async () => {// 分页查询方法const res = await getTableListApi({ ...pagination, pageIndex: pagination.currentPage }).catch(() => {}).finally(() => {loading.value = false})if (res) {tableDataList.value = res.data.list}
}const showDialog = () => {getTableList()setTimeout(() => {for (const item of defaultSelected.value) tableRef.value.toggleRowSelection(item, true) // 选中默认选中的行}, 0)visible.value = true
}const handlechange = (val: any) => {selected.value = val
}const handleClick = () => {defaultSelected.value = cloneDeep(selected.value)selected.value.length = 0pagination.currentPage = 1// 清空选项tableRef.value.clearSelection()visible.value = false
}watch(() => [pagination.currentPage, pagination.pageSize], getTableList, { immediate: true })
</script><template><!-- 控制弹窗显示 --><ElButton type="primary" @click="showDialog">显示</ElButton><!-- 表格弹窗 --><el-dialog title="提示" v-model="visible" width="80%" destroyOnClose><div class="w-full h-800px flex flex-col justify-between"><el-tableref="tableRef"height="760px":data="tableDataList":loading="loading"row-key="id"@selection-change="handlechange"><el-table-columnv-for="column in columns":type="column.type":key="column.field":prop="column.field":label="column.label":reserveSelection="true"/></el-table><div class="flex justify-start"><el-button type="primary" @click="handleClick">确认</el-button></div><!-- 分页器 --><div class="flex justify-end"><el-paginationbackgroundlayout="total, sizes, prev, pager, next, jumper"v-model:current-page="pagination.currentPage"v-model:page-size="pagination.pageSize":total="pagination.total":page-sizes="pagination.pageSizes"/></div></div></el-dialog>
</template>

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

SpringBoot+Thymeleaf图书管理系统

一、项目介绍 > 这是一个基于SpringBootThymeleaf实现的图书管理系统。 > 包含图书管理、作者管理、分类管理、出版社管理等功能。 > 界面简洁美观&#xff0c;代码结构清晰&#xff0c;完成度比较高&#xff0c;适用于JAVA初学者作为参考项目。 二、项目演示 三…

高级I/O知识分享【5种IO模型 || select || poll】

博客主页&#xff1a;花果山~程序猿-CSDN博客 文章分栏&#xff1a;Linux_花果山~程序猿的博客-CSDN博客 关注我一起学习&#xff0c;一起进步&#xff0c;一起探索编程的无限可能吧&#xff01;让我们一起努力&#xff0c;一起成长&#xff01; 目录 一&#xff0c;前文 2&a…

macOS使用brew安装并配置python环境

1.确认已安装brew环境,如没有安装,参考: macOS系统Homebrew工具安装及使用-CSDN博客 2.安装python python安装成功 3.添加pip路径到/etc/paths 4.查看python与pip默认安装版本

后续学习规划 ----含我个人的学习路线,经历及感受

目前的基础 开发相关&#xff08;最重要&#xff09; 1.Java SE 从入门到起飞 2.Java Web开发 3.苍穹外卖 以上三个是和开发相关的基础。 我是按照书写的顺序学习的&#xff0c;有需要的朋友可以参考。 计算机相关 其他的话&#xff0c;都是比较久远的了。隔得时间一年半…

无人机视角电力巡检资产检测与异常判别数据集

无人机视角电力巡检资产检测与异常判别&#xff0c;资产检测关注17类目标&#xff0c;共10000余张无人机图像&#xff0c;json方式标注&#xff0c;类别如下&#xff1a; 1.Spiral Damper - 螺旋阻尼器 2.Stockbridge Damper - 斯托克布里奇阻尼器 3.Glass Insulator - 玻璃绝缘…

我与Linux的爱恋:进程优先级|进程切换

​ ​ &#x1f525;个人主页&#xff1a;guoguoqiang. &#x1f525;专栏&#xff1a;Linux的学习 文章目录 1.进程优先级1.什么是进程优先级&#xff1f;2.进程优先级的类型3.进程优先级的作用4.进程优先级的实现5.进程优先级的重要性6.查看系统进程7.修改进程优先级8.优先…

java踩坑

1.mybatis在idea可以正常运行&#xff0c;但是打jar包后&#xff0c;就报链接超时&#xff0c;可能是参数设置有问题&#xff0c;但是idea自动忽略了。 出问题的配置&#xff1a;&#xff08;圈出来的地方乱码了&#xff0c;idea有纠错能力&#xff0c;它自动调整为正确的&…

【数据结构-差分】力扣1589. 所有排列中的最大和

有一个整数数组 nums &#xff0c;和一个查询数组 requests &#xff0c;其中 requests[i] [starti, endi] 。第 i 个查询求 nums[starti] nums[starti 1] … nums[endi - 1] nums[endi] 的结果 &#xff0c;starti 和 endi 数组索引都是 从 0 开始 的。 你可以任意排列…

React学习笔记(三)——React 组件通讯

1. 组件通讯-概念 了解组件通讯的意义 大致步骤&#xff1a; 知道组件的特点知道组件通讯意义 具体内容&#xff1a; 组件的特点 组件是独立且封闭的单元&#xff0c;默认情况下&#xff0c;只能使用组件自己的数据在组件化过程中&#xff0c;通常会将一个完整的功能拆分成多…

影刀RPA实战:网页爬虫之苦瓜书籍数据

书籍常常被视为心灵的慰藉&#xff0c;因为它们能够在不同的层面上为人们提供支持和安慰。 1. 书籍对我们的重要性 书籍是人类知识的载体&#xff0c;也是智慧的结晶。它们不仅是学习的工具&#xff0c;更是人类心灵的慰藉。在忙碌的生活中&#xff0c;书籍能够提供知识、启发…

缓存穿透 问题(缓存空对象)

文章目录 1、缓存穿透2、缓存空对象3、AlbumInfoApiController --》getAlbumInfo()4、AlbumInfoServiceImpl --》getAlbumInfo()5、RedisConstant6、请求缓存不存在的数据 1、缓存穿透 缓存穿透带有恶意性&#xff0c;强调不存在的数据。 2、缓存空对象 3、AlbumInfoApiCont…

【PHP源码】匿名来信系统H5版本V1.0免费开源源码(含搭建教程)

你的匿名来信H5一封你的来信源码/表白祝福短信程序/往来信/传话短信源码支持邮件发信与手机短信发信“你的匿名来信”是最近某音上爆火的一个活动话题&#xff0c;可以通过H5网站&#xff0c;编辑自己想要对某人说的话或者祝福&#xff0c;网站会把您想说的发给您预留的号码&am…

云计算课程作业1

作业1 Xmanager连接 rhel连接 作业2 首先确认你的虚拟机设置的是NAT 1-3 然后打开这篇blog&#xff0c;并完成第一步和第二步 因为我们是NAT&#xff0c;所以不需要连接网桥&#xff0c;即跳过第三步&#xff0c;但是这里ping一下测试网络连接 2- 如果到这里你发现提示yum…

uniapp中使用echarts 完整步骤,包括报错以及解决方案

在我们日常可能会有小程序中要使用echarts&#xff0c;我今天总结了一下整个引入的步骤 首先echarts - DCloud 插件市场在插件市场里面导入进项目&#xff0c;我这边用的是vue3的以及主要开发小程序&#xff0c;就直接放我的案例了 按照上面的步骤&#xff0c;在样式部分这样…

详读西瓜书+南瓜书第3章——线性回归

在这里&#xff0c;我们来深入探讨线性模型的相关内容&#xff0c;这章涵盖了从基础线性回归到更复杂的分类任务模型。我们会逐步分析其数学公式和实际应用场景。 3.1 基本形式 线性模型的核心是通过属性的线性组合来预测结果。具体形式为&#xff1a; 其中&#xff0c;w 是…

JVM基础篇学习笔记

【注&#xff1a;本文章为自学笔记&#xff0c;仅供学习使用。】 一、JVM简介 JVM是Java虚拟机的缩写&#xff0c;本质上是运行在计算机上面的程序&#xff0c;作用是运行Java字节码文件。 1.1 JVM的功能 Java如果不做优化&#xff0c;则性能不如C/C&#xff0c;因为后者会…

上手一个RGBD深度相机:从原理到实践--ROS noetic+Astra S(中):RGB相机的标定和使用

前言 本教程涉及基础相机的原理&#xff0c;使用&#xff0c;标定&#xff0c;和读取。(注&#xff1a;本教程默认大家有ROS1基础&#xff0c;故不对程序进行详细解释) 上一期&#xff1a;[csdn博客]上手一个RGBD深度相机&#xff1a;从原理到实践–ROS noeticAstra S&#xf…

vue无法通过页面路径访问提示404,通过nginx配置处理

部署vue项目时&#xff0c;可以通过IP的方式访问主页&#xff0c;当进入特定页面在刷新时&#xff0c;因为浏览器通过URL地址进行请求&#xff0c;就提示404错误。 每次都需要重新从主页进入&#xff0c;这里是因为nginx配置的问题&#xff0c;在nginx里增加一行重定向的设置 …

mac命令行分卷压缩与合并

对当前目录内的文件压缩的同时分卷 //语法:zip -r -s 1m 压缩文件名.zip 当前路径 zip -r -s 1m split.zip . //解压 zip -s 0 split.zip --out unsplit.zip unzip unsplit.zip 将一个zip文件进行分卷 一个900k的压缩包名为hello.zip,将其分割为每500K一个zip zip - hello.…

usemeno和usecallback区别及使用场景

1. useMemo 用途: useMemo 用于缓存计算结果。它接受一个函数和依赖项数组&#xff0c;只有当依赖项发生变化时&#xff0c;才会重新计算该函数的返回值。否则&#xff0c;它会返回缓存的值。 返回值: useMemo 返回的是函数执行后的结果。 使用场景: 当一个计算量大的函数在每…