vue el-table 滚动条样式设置(谷歌、火狐)

news/2024/7/10 0:31:29 标签: vue, table, 火狐, firefox, 滚动条

对于el-table滚动条的样式,webkit(谷歌为代表)和 moz(火狐)的设置是不同的,因此需要分别进行设置。

webkit(谷歌)

// 滚动条大小设置
::v-deep .el-table__body-wrapper::-webkit-scrollbar {
  /*纵向滚动条*/
  width: 5px;
  /*横向滚动条*/
  height: 5px;
}

// 滚动条滑块样式设置
::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
  background-color: #bfbfc0;
  border-radius: 5px;
}

// 滚动条背景样式设置
::v-deep .el-table__body-wrapper::-webkit-scrollbar-track {
  background: none;
}

// 表格横向和纵向滚动条对顶角样式设置
::v-deep .el-table__body-wrapper::-webkit-scrollbar-corner {
  background-color: #111;
}

// 去除滚动条上方多余显示
::v-deep .el-table__header .has-gutter th.gutter {
  display: none !important;
}

moz(火狐

// Firefox滚动条样式设置
::v-deep .el-table__body-wrapper {
  overflow-y: scroll;
  scrollbar-color: #bebebf transparent;
  scrollbar-width: thin;
}

火狐目前只找到了 scrollbar-color 和 scrollbar-width 这两个属性,scrollbar-color 的第一个值是滚动条的颜色,第二个值是滚动条轨道背景色。


http://www.niftyadmin.cn/n/1727431.html

相关文章

大数据复核_CPA成绩复核有多大的几率成功?

在历经两个月的煎熬等待,注会考生终于在冬至日迎来了注会考试成绩,但除了好消息外,高顿CPA小编也看到许多人只差几分就能合格,59分尤其多!有一说一,59分真的是注会人最不想面对的成绩,只要一分就…

uniapp 刷新后数据都没有了_UNI-APP返回刷新的问题

回复 530915474qq.com:这一段在调用返回的方法中写:var pages getCurrentPages();var currPage pages[pages.length - 1]; //当前页面var prevPage pages[pages.length - 2]; //上一个页面//直接调用上一个页面的setData()方法,把数据存到上一个页面中…

linux 快速创建10GB大文件

dd if/dev/zero ofbig_file count10 bs1G

麒麟V10 arm 环境配置yum源

# 进入yum源文件目录 cd /etc/yum.repos.d# 备份yum源文件 cp kylin_aarch64.repo kylin_aarch64.repo.bak# 修改源文件内容 vim kylin_aarch64.repo[ks10-adv-os] name Kylin Linux Advanced Server 10 - Os baseurl http://archive2.kylinos.cn/rpm/kylin/production/KY-KY…

vue el-table 显示/隐藏列异常-表格数据域高度变小

在我们需要对表格的列做动态的显示/隐藏时,会遇到一个问题,那就是在某一列从隐藏到显示时,整个表格会闪烁,仔细观察会发现是表格的表头高度瞬间变大,然后又缩回去了,这就导致一个问题,表格数据域…

将svg编译成字体图标

有时将svg图标编译成字体图标,可以更方便的来使用,下面就介绍如何将svg编译成字体图标 1. 使用npm安装svgtofont npm i svgtofont 2. 编译字体图标 const svgtofont require("svgtofont");svgtofont({src: path.resolve(process.cwd(), &…

mysql 不同版本 下载地址

mirror.fra10.de.leaseweb.net | powered by LeasewebLeaseweb public mirror archivehttps://mirror.leaseweb.com/mysql/Downloads/

Linux平台安装使用MySQL数据库

1. 下载安装包,并进行权限配置等 # 下载安装包: wget wget https://mirror.leaseweb.com/mysql/Downloads/MySQL-5.7/mysql-5.7.36-el7-x86_64.tar.gz # 若下载不下来,可从这里下载:https://download.csdn.net/download/u0139923…