el-table(elementui)表格合计行使用以及滚动条默认样式修改
一、el-table新增合计行以及el-table展示数据出现的问题
1. 使用合计行
el-table的属性show-summary设为true,即可在表格尾部展示合计行。默认情况下,第一列不展示数据,而显示合计二字,可以通过sum-text自己配置,其余列会显示本列所有数据的和。- __自定义合计逻辑:__在
el-table标签使用summary-method传入一个方法,该方法会返回一个数组,该数组的各项会显示在合计行的各列。 - 自定义合计逻辑示例代码:
// tamplate标签中el-table写法,getTotal为自定义计算合计行数据的函数
// summary为boolean型变量,用于控制是否显示合计行
<el-table:data="tableData"ref="scrollTable":summary-method="getTotal":show-summary="summary"
></table>// script标签methods中计算合计行数据的函数getTotal(params) {// columns table的所有列const { columns } = params;let sums = []; // 要返回并展示在界面的数组columns.forEach((element, index) => {if (index == 0) {sums[index] = "合计";} // 这个地方自己定义逻辑// 给sums数组赋值 ,下标为i(从0开始),则展示中合计行第i+1列});return sums;},
2. table新增合计行后产生的问题以及解决方法
(1)问题1
- 产生问题:添加合计行之后,横向滚动条位于合计行上方,希望滚动条显示在合计行下面
- 解决:
el-table分为headerWrapper、bodyWrapper、footerWrapper三部分,界面中显示的横向滚动条实际上是bodyWrapper的滚动条,通过一些内外边距设置,让滚动条挪到表格最下方
// 滚动区域样式.el-table--scrollable-x .el-table__body-wrapper {padding-bottom: 50px;}.el-table__footer-wrapper {margin-top: -66px;//66 60overflow-y: scroll !important;}.el-table__fixed-footer-wrapper {padding-bottom: 15px;//15 9}
(2)问题2
- 产生问题:如果table左侧设置了固定列,那么横线滚动条处于固定列下方时无法拖拽进行移动
- 产生原因:合计行使用了
position: absolute定位,且设置了层级高于其他元素,会遮挡底下的内容 - 解决:给左侧固定列设置
bottom(根据自己界面调整),留出固定列底部的位置显示层级较低的滚动条
::v-deep .el-table__fixed {height: auto !important;bottom: 9px !important;}
3. el-table横向滚动条滑到最右边,会出现表头和内容错位
(1)问题描述
- 问题描述:当
el-table表格有横向滚动条和纵向滚动条,把横向滚动条拉到最右边,表格的表头会和内容错位(表头和内容列不对齐) - 问题产生原因:在
el-table有纵向滚动条时,el-table__body-wrapper + 纵向滚动条的宽度是100%,故表格内容区域宽度不足100%,而表头el-table__header-wrapper的宽度仍为100%,表格内容实际宽度小于表头,因此造成错位
(2)解决问题
- 思路:给表格表头的宽度设置和表格内容一样即可
100% - 纵向滚动条宽度 - 代码实现
::v-deep {.el-table__header-wrapper {// 这里我设置的纵向滚动条宽度为8pxwidth: calc(100% - 8px) }
}
二、修改el-table默认滚动条样式
-webkit-scrollbar表示整个滚动条-webkit-scrollbar-thumb滑块-webkit-scrollbar-track轨道,里面有滑块-webkit-scrollbar-button滚动条轨道的两端按钮,允许通过点击微调小方块的位置- 代码示例:
::v-deep .el-table__body-wrapper::-webkit-scrollbar {width: 10px; /*滚动条宽度*/height: 10px; /*滚动条高度*/}
可以根据以上几个样式组成部分修改滚动条默认样式,比如宽高、以及是否显示等(通过overflow设置)。
相关文章:
el-table(elementui)表格合计行使用以及滚动条默认样式修改
一、el-table新增合计行以及el-table展示数据出现的问题 1. 使用合计行 el-table的属性show-summary设为true,即可在表格尾部展示合计行。默认情况下,第一列不展示数据,而显示合计二字,可以通过sum-text自己配置,其余…...
Web前端开发——HTML基础下
HTML语法 一表格1.基本格式2.美化表格合并居中属性 二表单1.input2.select3.textarea4.button5.date6.color7.checkbox8.radio9.range10.number 一表格 1.基本格式 HTML表格由<table>标签定义 其中行由<tr>标签定义,单元格由<td>定义。我们先来…...
Python使用入门(一)
初识数据类型 整型(int) print(666) print(2 10) print(2 * 12)字符串(str) 单行字符串 #单行字符串 print("我是小红aaa") print(我是小红aaa)print("中国上海") print(中国上海)# 输出带引号的字符串 print(我是"小红aaa) print("我是\&qu…...
基于multisim的花样彩灯循环控制电路设计与仿真
1 课程设计的任务与要求 (一)、设计内容: 设计一个8路移存型彩灯控制器,基本要求: 1. 8路彩灯能演示至少三种花型(花型自拟); 2. 彩灯用发光二极管LED模拟; 3. 选做…...
求最大公约数【C/C++】
大家好啊,欢迎来到本博客( •̀ ω •́ )✧,我将带领大家详细的了解最大公约数的思想与解法。 一、什么是公约数 公约数,也称为公因数,是指两个或多个整数共有的因数。具体来说,如果一个整数能被两个或多个整数整除&…...
leetcode day27 455+376
455 分发饼干 假设你是一位很棒的家长,想要给你的孩子们一些小饼干。但是,每个孩子最多只能给一块饼干。 对每个孩子 i,都有一个胃口值 g[i],这是能让孩子们满足胃口的饼干的最小尺寸;并且每块饼干 j,都有…...
go的grpc
GRPC介绍 目录 单体架构微服务架构问题原始的grpc 服务端客户端原生rpc的问题 grpc的hello world 服务端客户端 proto文件proto语法 数据类型 基本数据类型其他数据类型 编写风格多服务 单体架构 只能对整体扩容一荣俱荣,一损俱损代码耦合,项目的开…...
算法每日一练 (9)
💢欢迎来到张胤尘的技术站 💥技术如江河,汇聚众志成。代码似星辰,照亮行征程。开源精神长,传承永不忘。携手共前行,未来更辉煌💥 文章目录 算法每日一练 (9)最小路径和题目描述解题思路解题代码…...
软考高级信息系统项目管理师笔记-第10章项目进度管理
第10章项目进度管理 10.1 管理基础 10.1.1 项目进度计划的定义和总要求 1、项目进度计划是 一种用于沟通和管理干系人期望的工具,为绩效报告提供依据。 2、项目管理团队编制进度计划的一般步骤为: 首先选择进度计划方法,例如关键路径法; 然后将项目特定数据,如活动、计…...
专门为高速连续扫描设计的TDI工业相机
TDI(Time Delay Integration,时间延迟积分)工业相机是一种基于特殊CCD(电荷耦合器件)技术的成像设备,主要用于高速、高灵敏度、高分辨率的图像采集场景。其核心原理是通过多级积分和同步电荷转移技术&#…...
【Vue3】实现一个超过高度后可控制显示隐藏的组件
组件效果图 未达到最大高度 达到设置的最大高度 进行展开 实现代码 组件代码 备注:通过tailwindcss设置的样式,通过element-plus/icons-vue设置的图标,可根据情况进行替换 <template><!-- 限制高度组件 --><div ref"…...
Spring提供的SPEL表达式
SPEL 1. 概述 SpEL是Spring框架中用于表达式语言的一种方式。它类似于其他编程语言中的表达式语言,用于在运行时计算值或执行特定任务。 SpEL提供了一种简单且强大的方式来访问和操作对象的属性、调用对象的方法,以及实现运算、条件判断等操作。它可以…...
JAVA编程【jvm垃圾回收的差异】
jvm垃圾回收的差异 JVM(Java Virtual Machine)的垃圾回收(GC)机制是自动管理内存的一种方式,能够帮助开发者释放不再使用的内存,避免内存泄漏和溢出等问题。不同的垃圾回收器(GC)有…...
Elasticsearch:“Your trial license is expired”
目录标题 问题原因解决方案 问题 原因 ES的X-pack许可证是提供免费一个月的试用,到期之后就会报这个错误。 解决方案 查看license GET _license 开启试用license POST _xpack/license/start_trial?acknowledgetrue修改为基础license POST _xpack/license/start_…...
fmql之Linux WDT
正点原子第52章。 基础知识 正点原子教程 fmql-dts 代码 APP代码(不需要编写驱动代码) static int dw_wdt_drv_probe(struct platform_device *pdev) {struct device *dev &pdev->dev;struct watchdog_device *wdd;struct dw_wdt *dw_wdt; …...
【算法学习之路】7.链表算法
链表算法 前言一.原地逆置思路一:头插法思路二:双指针法思路3:递归 例题:1.头插法2.双指针法3,递归 二.双指针快慢指针:一个指针快一个指针慢例题1例题2 前言 我会将一些常用的算法以及对应的题单给写完&am…...
IDEA Commit 模态提交界面关闭VS开启对比
IDEA Commit 模态提交界面关闭VS开启对比 前言开启模态提交界面优点快捷且灵活的选择需要commit文件显示文件修改内容多(主观) 缺点在模态提交界面选择文件,临时关闭模态框重新打开会重置选择的commit文件 关闭模态提交界面优点允许在commit选择文件时查看其它没有修…...
【AI赋能】AI 工具生成视频教材:从创意到成品的全流程指南
AI 工具生成视频教材:从创意到成品的全流程指南 目标 通过本教材,您将学会如何利用 AI 工具(Grok、Sora、Speechify 和 CapCut)生成一个完整的视频,包括脚本生成、视频片段制作、字幕添加、音频生成以及最终剪辑合成…...
qt 操作多个sqlite文件
qt 操作多个sqlite文件 Chapter1 qt 操作多个sqlite文件1. 引入必要的头文件2. 创建并连接多个SQLite数据库3. 代码说明4. 注意事项 Chapter2 qt 多线程操作sqlite多文件1. 引入必要的头文件2. 创建数据库操作的工作线程类3. 在主线程中创建并启动多个工作线程4. 代码说明5. 运…...
WSL with NVIDIA Container Toolkit
一、wsl 下安装 docker 会提示安装 docekr 桌面版,所以直接安装 docker 桌面版本即可 二、安装 NVIDIA Container Toolkit NVIDIA Container Toolkit仓库 https://github.com/NVIDIA/nvidia-container-toolkitgithub.com/NVIDIA/nvidia-container-toolkit 安装…...
MusePublic Art Studio实际效果:UI设计稿生成中组件一致性保障
MusePublic Art Studio实际效果:UI设计稿生成中组件一致性保障 1. 引言:当AI成为你的UI设计搭档 想象一下这个场景:你正在为一个新的移动应用设计UI界面。你已经画好了登录页的草图,上面有圆角按钮、卡片式布局和一套清爽的配色…...
Qwen3-4B Instruct-2507实际作品:用户说‘我要创业’→商业计划书框架生成
Qwen3-4B Instruct-2507实际作品:用户说‘我要创业’→商业计划书框架生成 1. 引言:当创业想法遇到AI助手 “我要创业!” 这句话背后,往往是一个激动人心的想法,但随之而来的是一连串的现实问题:我的商业…...
如何高效使用NumPy结构化数组:处理复杂数据格式的终极指南
如何高效使用NumPy结构化数组:处理复杂数据格式的终极指南 【免费下载链接】numpy numpy/numpy: NumPy 是一个用于 Python 的数值计算库,提供了多种数学函数和工具,可以用于数值计算和科学计算,支持多种数学函数和工具,…...
Windows下Go-FastDFS对象存储系统:从零搭建到可视化管理的完整指南
1. Go-FastDFS简介与核心优势 Go-FastDFS是一个基于HTTP协议的轻量级分布式文件存储系统,特别适合中小型项目快速搭建文件存储服务。我第一次接触这个系统是在2019年,当时需要一个简单易用的文件存储方案来支撑公司内部的文件共享需求。经过对比多个方案…...
基于Altera Cyclone4 FPGA-EP4CE15F17C8核心板的硬件设计实战(原理图+PCB+AD09工程)
1. 从零开始搭建FPGA核心板硬件系统 第一次接触FPGA核心板设计时,我被密密麻麻的引脚和复杂的电源系统搞得头晕眼花。直到用AD09完整走完EP4CE15F17C8核心板的设计流程,才发现硬件开发就像搭积木——只要掌握模块化思维,菜鸟也能做出专业级设…...
MoveIt Config 配置文件完整一致性检查
检查范围(全部核对完毕)ros2_control xacro(硬件接口 / 关节)initial_positions.yaml(初始位置)srdf(运动组 / 关节)joint_limits.yaml(关节限制)kinematics.…...
trt 动态batchsize优化:trtexec工具ONNX转engine实战指南
1. 为什么需要动态batchsize优化 在实际的AI模型部署中,我们经常会遇到输入数据量不固定的情况。比如视频分析场景,可能同时有1路或8路视频需要实时处理;又比如在线服务,请求量会随时间波动。这时候如果使用固定batchsize…...
5分钟搞定三网话费余额查询:手把手教你用PHP+HTML搭建查询系统(含API调用避坑指南)
三网话费查询系统开发实战:从API调用到前端优化的全流程指南 最近在帮朋友开发一个小型话费查询工具时,发现市面上关于三网运营商API调用的完整教程并不多见。大多数开发者遇到问题时只能靠反复试错,特别是当需要同时对接移动、联通、电信三家…...
Qwen3-14B-AWQ模型效果深度评测:在算法题求解上的表现
Qwen3-14B-AWQ模型效果深度评测:在算法题求解上的表现 1. 评测背景与模型简介 在AI技术快速发展的今天,大语言模型在代码生成和算法解题领域展现出越来越强的能力。Qwen3-14B-Int4-AWQ作为通义千问系列的最新量化版本,在保持较高推理能力的…...
夺回社交主动权:iBeebo如何让微博回归纯粹体验
夺回社交主动权:iBeebo如何让微博回归纯粹体验 【免费下载链接】iBeebo 第三方新浪微博客户端 项目地址: https://gitcode.com/gh_mirrors/ib/iBeebo 你是否经历过这样的时刻?通勤路上想快速刷几条微博,却被开屏广告耽误了上车时间&am…...
