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

相关文章

Python获取中国节假日数据记录入JSON文件

《Python获取中国节假日数据记录入JSON文件》项目系统内置的日历应用为了提升用户体验,特别设置了在调休日期显示“休”的UI图标功能,那么问题是这些调休数据从哪里来呢?我尝试一种更为智能的方法:P... 目录节假日数据获取存入jsON文件节假日数据读取封装完整代码项目系统内置的日历应用为了提升用户体验,

使用Sentinel自定义返回和实现区分来源方式

《使用Sentinel自定义返回和实现区分来源方式》:本文主要介绍使用Sentinel自定义返回和实现区分来源方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录Sentinel自定义返回和实现区分来源1. 自定义错误返回2. 实现区分来源总结Sentinel自定

Java利用JSONPath操作JSON数据的技术指南

《Java利用JSONPath操作JSON数据的技术指南》JSONPath是一种强大的工具,用于查询和操作JSON数据,类似于SQL的语法,它为处理复杂的JSON数据结构提供了简单且高效... 目录1、简述2、什么是 jsONPath?3、Java 示例3.1 基本查询3.2 过滤查询3.3 递归搜索3.4

MySQL大表数据的分区与分库分表的实现

《MySQL大表数据的分区与分库分表的实现》数据库的分区和分库分表是两种常用的技术方案,本文主要介绍了MySQL大表数据的分区与分库分表的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有... 目录1. mysql大表数据的分区1.1 什么是分区?1.2 分区的类型1.3 分区的优点1.4 分

Mysql删除几亿条数据表中的部分数据的方法实现

《Mysql删除几亿条数据表中的部分数据的方法实现》在MySQL中删除一个大表中的数据时,需要特别注意操作的性能和对系统的影响,本文主要介绍了Mysql删除几亿条数据表中的部分数据的方法实现,具有一定... 目录1、需求2、方案1. 使用 DELETE 语句分批删除2. 使用 INPLACE ALTER T

Python Dash框架在数据可视化仪表板中的应用与实践记录

《PythonDash框架在数据可视化仪表板中的应用与实践记录》Python的PlotlyDash库提供了一种简便且强大的方式来构建和展示互动式数据仪表板,本篇文章将深入探讨如何使用Dash设计一... 目录python Dash框架在数据可视化仪表板中的应用与实践1. 什么是Plotly Dash?1.1

GORM中Model和Table的区别及使用

《GORM中Model和Table的区别及使用》Model和Table是两种与数据库表交互的核心方法,但它们的用途和行为存在著差异,本文主要介绍了GORM中Model和Table的区别及使用,具有一... 目录1. Model 的作用与特点1.1 核心用途1.2 行为特点1.3 示例China编程代码2. Tab

Redis 中的热点键和数据倾斜示例详解

《Redis中的热点键和数据倾斜示例详解》热点键是指在Redis中被频繁访问的特定键,这些键由于其高访问频率,可能导致Redis服务器的性能问题,尤其是在高并发场景下,本文给大家介绍Redis中的热... 目录Redis 中的热点键和数据倾斜热点键(Hot Key)定义特点应对策略示例数据倾斜(Data S

如何自定义Nginx JSON日志格式配置

《如何自定义NginxJSON日志格式配置》Nginx作为最流行的Web服务器之一,其灵活的日志配置能力允许我们根据需求定制日志格式,本文将详细介绍如何配置Nginx以JSON格式记录访问日志,这种... 目录前言为什么选择jsON格式日志?配置步骤详解1. 安装Nginx服务2. 自定义JSON日志格式各

Python实现将MySQL中所有表的数据都导出为CSV文件并压缩

《Python实现将MySQL中所有表的数据都导出为CSV文件并压缩》这篇文章主要为大家详细介绍了如何使用Python将MySQL数据库中所有表的数据都导出为CSV文件到一个目录,并压缩为zip文件到... python将mysql数据库中所有表的数据都导出为CSV文件到一个目录,并压缩为zip文件到另一个