el-table自定义样式,表头固定,数据过多时滚动

2024-08-22 18:20

本文主要是介绍el-table自定义样式,表头固定,数据过多时滚动,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

最终效果:(此处没体现出来滚动,数据没那么多)

1.表头固定,设置表头样式,修改表格背景色

<div class="category-table">

   <el-table

          ref="tableRef"

          class="common-table"

          height="100%"

          :row-style="{ height: rowHeight + 'px' }"

          :header-row-style="{

            background: `url(${tableHeader}) center no-repeat !important`,

            backgroundSize: `100% 100% !important`,

          }"

          style="width: 100%; height: 100%; background-color: transparent"

        >

  </el-table>

</div>

动态设置行高,在获取到数据以后,记得加一个$nextTick(),不然会报错

// 在获取到表格数据后,判断数据长度大于0后调用
this.$nextTick(() => {this.initRowHeight();
});// 设置行高initRowHeight() {let tableHeight =Math.round(this.$refs["tableRef"].$el.offsetHeight) -Math.round(this.$refs["tableRef"].$el.childNodes[1].offsetHeight);this.rowHeight = Math.floor(tableHeight / 10); // 返回小于等于最终结果的最大整数setTimeout(() => {if (this.$refs.tableRef) {this.$refs.tableRef.doLayout();}}, 1000);},

2.写在有scoped 的style标签内
/* 显示滚动条 */
.category-table ::v-deep .el-table--scrollable-x .el-table__body-wrapper {overflow-y: scroll;
}
/* 设置表格的滚动条宽度 */
.category-table >>> .el-table__body-wrapper::-webkit-scrollbar {width: 10px;height: 8px;
}
/*定义滚动条轨道 内阴影+圆角*/
.category-table >>> .el-table__body-wrapper::-webkit-scrollbar-track {border-radius: 8px;background-color: transparent;
}
/*定义滑块 内阴影+圆角*/
.category-table >>> .el-table__body-wrapper::-webkit-scrollbar-thumb {border-radius: 8px;box-shadow: inset 0 0 6px rgba(200, 209, 217, 0.3);background-color: rgba(76, 77, 77, 0.1);
}
 3.公共的scss样式文件内,没有公共样式文件的话可以放在没有scoped的style标签内,有的话要保证在main.js里引入了
/* el-table表格组件样式 */
.common-table {/* 表格加载中的背景 */.el-loading-mask {background-color: transparent;}/** 设置表格暂无数据样式 */.el-table__empty-block {background-color: transparent;color: #a8bfd5;letter-spacing: 2px;}/** 修改表头多选样式 */.el-checkbox__inner {background-color: transparent;}.el-checkbox__inner:hover {border: 1px solid #6d90ae;}.el-checkbox__input.is-checked .el-checkbox__inner {background-color: #1173be;}/* 设置表头样式 */&.el-table .el-table__header-wrapper th {color: #85b4e6;font-weight: normal;font-size: var(--font-size-base);letter-spacing: 2px;background-color: transparent !important;background: url("/images/imagine/table-header.png") center no-repeat;background-size: 100% 100%;border-bottom: 1px solid #0b4f85;box-sizing: border-box;}/** 设置表格的行背景色 */.el-table__row {background: url("/images/imagine/table-row1.png") center no-repeat;background-size: 100% 100%;}/** 去掉每一行的底边border */&.el-table td.el-table__cell {color: #aec4da;border-bottom: 1px solid #0b4f85;font-size: var(--font-size-base);letter-spacing: 2px;}/* 修改表格上侧和左侧的border */&.el-table--border,&.el-table--group,/* 修改表格右侧和底侧的border */&.el-table--border:after,&.el-table--group:after,&.el-table:before {border-color: transparent;}/* 删除表格右侧的border */&.el-table--border::after {width: 0;}/** 设置表格左侧第一列的边 */&.el-table td.el-table__cell:first-child {border-left: 1px solid #0b4f85;}/** 去掉表格的底边border */&.el-table::before {height: 0;}/** 去掉表格头部的border */&.el-table--border {border: none;}/** 表格内部每一列右侧border */&.el-table--border .el-table__cell {border-right: 1px solid #0b4f85;}/** 表格行的鼠标滑过样式 */&.el-table tbody tr:hover>td {background: url("/images/imagine/table-row2.png") center no-repeat !important;background-size: 100% 100% !important;}/* 去掉表格滚动条那一列的border */&.el-table--border th.el-table__cell.gutter:last-of-type {border-bottom-width: 0;}
}

这篇关于el-table自定义样式,表头固定,数据过多时滚动的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!


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

相关文章

C#监听txt文档获取新数据方式

《C#监听txt文档获取新数据方式》文章介绍通过监听txt文件获取最新数据,并实现开机自启动、禁用窗口关闭按钮、阻止Ctrl+C中断及防止程序退出等功能,代码整合于主函数中,供参考学习... 目录前言一、监听txt文档增加数据二、其他功能1. 设置开机自启动2. 禁止控制台窗口关闭按钮3. 阻止Ctrl +

java如何实现高并发场景下三级缓存的数据一致性

《java如何实现高并发场景下三级缓存的数据一致性》这篇文章主要为大家详细介绍了java如何实现高并发场景下三级缓存的数据一致性,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 下面代码是一个使用Java和Redisson实现的三级缓存服务,主要功能包括:1.缓存结构:本地缓存:使

SpringBoot 异常处理/自定义格式校验的问题实例详解

《SpringBoot异常处理/自定义格式校验的问题实例详解》文章探讨SpringBoot中自定义注解校验问题,区分参数级与类级约束触发的异常类型,建议通过@RestControllerAdvice... 目录1. 问题简要描述2. 异常触发1) 参数级别约束2) 类级别约束3. 异常处理1) 字段级别约束

在MySQL中实现冷热数据分离的方法及使用场景底层原理解析

《在MySQL中实现冷热数据分离的方法及使用场景底层原理解析》MySQL冷热数据分离通过分表/分区策略、数据归档和索引优化,将频繁访问的热数据与冷数据分开存储,提升查询效率并降低存储成本,适用于高并发... 目录实现冷热数据分离1. 分表策略2. 使用分区表3. 数据归档与迁移在mysql中实现冷热数据分

C#解析JSON数据全攻略指南

《C#解析JSON数据全攻略指南》这篇文章主要为大家详细介绍了使用C#解析JSON数据全攻略指南,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录一、为什么jsON是C#开发必修课?二、四步搞定网络JSON数据1. 获取数据 - HttpClient最佳实践2. 动态解析 - 快速

MySQL 8 中的一个强大功能 JSON_TABLE示例详解

《MySQL8中的一个强大功能JSON_TABLE示例详解》JSON_TABLE是MySQL8中引入的一个强大功能,它允许用户将JSON数据转换为关系表格式,从而可以更方便地在SQL查询中处理J... 目录基本语法示例示例查询解释应用场景不适用场景1. ‌jsON 数据结构过于复杂或动态变化‌2. ‌性能要

解决1093 - You can‘t specify target table报错问题及原因分析

《解决1093-Youcan‘tspecifytargettable报错问题及原因分析》MySQL1093错误因UPDATE/DELETE语句的FROM子句直接引用目标表或嵌套子查询导致,... 目录报js错原因分析具体原因解决办法方法一:使用临时表方法二:使用JOIN方法三:使用EXISTS示例总结报错原

MyBatis-Plus通用中等、大量数据分批查询和处理方法

《MyBatis-Plus通用中等、大量数据分批查询和处理方法》文章介绍MyBatis-Plus分页查询处理,通过函数式接口与Lambda表达式实现通用逻辑,方法抽象但功能强大,建议扩展分批处理及流式... 目录函数式接口获取分页数据接口数据处理接口通用逻辑工具类使用方法简单查询自定义查询方法总结函数式接口

SpringBoot+EasyExcel实现自定义复杂样式导入导出

《SpringBoot+EasyExcel实现自定义复杂样式导入导出》这篇文章主要为大家详细介绍了SpringBoot如何结果EasyExcel实现自定义复杂样式导入导出功能,文中的示例代码讲解详细,... 目录安装处理自定义导出复杂场景1、列不固定,动态列2、动态下拉3、自定义锁定行/列,添加密码4、合并

SQL中如何添加数据(常见方法及示例)

《SQL中如何添加数据(常见方法及示例)》SQL全称为StructuredQueryLanguage,是一种用于管理关系数据库的标准编程语言,下面给大家介绍SQL中如何添加数据,感兴趣的朋友一起看看吧... 目录在mysql中,有多种方法可以添加数据。以下是一些常见的方法及其示例。1. 使用INSERT I