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

news2024/11/25 11:05:35
最终效果:(此处没体现出来滚动,数据没那么多)

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;
    }
}

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

java之类和对象的介绍

1.面向对象和面向过程的概念&#xff1a; 面向对象&#xff1a;面向对象是解决问题的一种思想&#xff0c;主要依靠对象之间的交互完成一件事。 面向过程&#xff1a;注重完成一件事情的过程&#xff0c;后续代码维护扩展较为麻烦。 以洗衣服为例&#xff0c;面向对象为传统…

微软AI人工智能认证有哪些?

微软提供的人工智能认证主要包括以下几个方面&#xff1a; Azure AI Fundamentals&#xff08;AI900认证&#xff09;&#xff1a;这是一个基础认证&#xff0c;旨在展示与Microsoft Azure软件和服务开发相关的基本AI概念&#xff0c;以创建AI解决方案。它面向具有技术和非技术…

C++学习路线分享

我上大学学的第一门编程语言便是C&#xff0c;靠着那本饱受诟病的谭浩强版的教材度过了大一上学期。学的内容现在看来相当之浅&#xff0c;如果没记错的话只学了个基本的语法&#xff0c;考试的时候考一些冒泡&#xff0c;快排之类的东西就结束了。感觉那些有计算机教育背景的学…

解决Qt多线程中fromRawData函数生成的QByteArray数据不一致问题

解决Qt多线程中fromRawData函数生成的QByteArray数据不一致问题 目录 &#x1f514; 问题背景&#x1f4c4; 问题代码❓ 问题描述&#x1fa7a; 问题分析✔ 解决方案 &#x1f514; 问题背景 在开发一个使用Qt框架的多线程应用程序时&#xff0c;我们遇到了一个棘手的问题&…

【Linux】生产消费模型实践 --- 基于信号量的环形队列

你送出去的每颗糖都去了该去的地方&#xff0c; 其实地球是圆的&#xff0c; 你做的好事终会回到你身上。 --- 何炅 --- 基于信号量的环形队列 1 信号量2 框架构建3 代码实现4 测试运行 1 信号量 信号量本质是一个计数器&#xff0c;可以在初始化时对设置资源数量&#xf…

数据结构——链式队列和循环队列

目录 引言 队列的定义 队列的分类 1.单链表实现 2.数组实现 队列的功能 队列的声明 1.链式队列 2.循环队列 队列的功能实现 1.队列初始化 (1)链式队列 (2)循环队列 (3)复杂度分析 2.判断队列是否为空 (1)链式队列 (2)循环队列 (3)复杂度分析 3.判断队列是否…

91. UE5 RPG 实现拖拽装配技能以及解除委托的绑定

在上一篇文章里&#xff0c;实现了通过选中技能&#xff0c;然后点击下方的装备技能插槽实现了技能的装配。为了丰富技能装配功能&#xff0c;在这一篇里&#xff0c;我们实现一下通过拖拽技能&#xff0c;实现拖拽功能&#xff0c;我们需要修改两个用户控件&#xff0c;一个就…

鸿蒙内核源码分析(信号生产篇) | 注意结构体的名字和作用.

信号生产 关于信号篇&#xff0c;本只想写一篇&#xff0c;但发现把它想简单了&#xff0c;内容不多&#xff0c;难度极大.整理了好长时间&#xff0c;理解了为何<<深入理解linux内核>>要单独为它开一章&#xff0c;原因有二 信号相关的结构体多&#xff0c;而且…

RTC碰到LXTAL低频晶振停振怎么办?

GD32F303的RTC模块框图如下图所示&#xff0c;RTC时钟源可选择HXTAL/128、LXTAL或IRC40K&#xff0c;一般为了实现更精准的RTC时间&#xff0c;MCU系统均会外挂32.768KHz LXTAL低频晶振&#xff0c;但由于低频晶振负阻抗较大&#xff0c;不容易起振&#xff0c;若外部电路布线、…

vue3 antdv3 去掉Modal的阴影背景,将圆角边框改为直角的显示,看上去不要那么的立体的样式处理。

1、来个没有处理的效果图&#xff1a; 这个有立体的效果&#xff0c;有阴影的效果。 2、要处理一下样式&#xff0c;让这个阴影的效果去掉&#xff1a; 图片的效果不太明显&#xff0c;但是阴影效果确实没有了。 3、代码&#xff1a; /* 去掉遮罩层阴影 */.ant-modal-mask {…

Maven命令传pom或者jar异常

上传命令&#xff1a;mvn deploy:deploy-file -Durlhttp://****&#xff1a;****/repository/chntdrools7741-releases -DrepositoryId**** -DfileD:/tempRepo/org/kie/kie-api-parent/7.69.0.Final/kie-api-parent-7.69.0.Final.pom -DpomFileD:/tempRepo/org/kie/kie-api-par…

三级_网络技术_39_综合题(命令)

一、 如下图所示&#xff0c;某校园网用10Gbps 的POS技术与Internet相连&#xff0c;POS接网的幅格式早SDH。路由协议的选择方案是校园网内部采用OSPF协议&#xff0c;校园网与lntemnet的连接使用静态路由协议。校园网内的路由器R1设为DHCP服务器&#xff0c;可分配的IP地址是…

【22-54】创建者模式(详解五大模式)

目录 一.创建者模式介绍 二.单例设计模式 2.1 单例模式的结构 2.2 单例模式的实现 2.2.1.1 饿汉式-方式1&#xff08;静态变量方式&#xff09; 2.2.1.2 饿汉式-方式2&#xff08;静态代码块方式&#xff09; 2.2.2.1 懒汉式-方式1&#xff08;线程不安全&#xff09; 2…

用手机写一本电子书

第1步、进入Andi.cn网站 第2步、点击登录&#xff0c;注册用户 第3步、点击去创作&#xff0c;进入创作页面 第4步、点击右下角的小笔&#xff0c;写一篇文章 第5步、下翻&#xff0c;点击提交按钮 第6步、再写一篇文章 第7步、点击栏目设计 第8步、进入栏目设计&#xff0c;点…

excel卓越之道笔记

excel快捷键 1.Alt+=一键求和 2.Tab补全函数名称 3.CONCAT可以连选,CONCATENATE只能一个单元格一个单元格点选 4.excel365用不了phonetic函数,但是可以用concat代替 5.textjoin连接标识码,在Arcgis中筛选出所需要素,也是很好用的 6.法1:alt+; 定位可见单元格,复制后只…

Linux入门——01常用命令

0.命令行解释器shell 用户无法直接给操作系统指令&#xff0c;需要经过shell,才能让操作系统明白。如果用户对操作系统非法操作&#xff0c;会有shell保护。shell本身也是一个进程&#xff0c;当然&#xff0c;用户给shell的指令&#xff0c;shell会派生出子进程进行执行&#…

Unity Protobuf3.21.12 GC 问题(反序列化)

背景&#xff1a;Unity接入的是 Google Protobuf 3.21.12 版本&#xff0c;排查下来反序列化过程中的一些GC点&#xff0c;处理了几个严重的&#xff0c;网上也有一些分析&#xff0c;这里就不一一展开&#xff0c;默认读者已经略知一二了。 如果下面有任何问题请评论区留言提…

【Kubernetes中如何对etcd进行备份和还原】

&#x1f3a5;博主&#xff1a;程序员不想YY啊 &#x1f4ab;CSDN优质创作者&#xff0c;CSDN实力新星&#xff0c;CSDN博客专家 &#x1f917;点赞&#x1f388;收藏⭐再看&#x1f4ab;养成习惯 ✨希望本文对您有所裨益&#xff0c;如有不足之处&#xff0c;欢迎在评论区提出…

不同路径

不同路径 思路&#xff1a; 法一&#xff1a;动态规划 const int N 110; class Solution { int dp[N][N];//dp[i][j]&#xff1a;从起点走到 i j的路径个数。 public:int uniquePaths(int m, int n) {for(int i1;i<n;i){dp[1][i]1;} for(int i1;i<m;i) dp[i][1]1;f…

day36.动态规划+重载操作符

动态规划好难啊(ಥ﹏ಥ) 终于搞懂0-1背包问题的二维数组转一维数组优化的问题了。如图所示: 将二维数组转换成一位数组的核心就是&#xff0c;dp[i][j]选取时&#xff0c;他的值只与dp[i-1][j]&#xff0c;也就是上一行有关&#xff0c;所以可以引出使用一维数组代替二维数组…