element-ui中的表格el-table滚动条样式修改以及textarea样式修改

最新推荐文章于 2025-09-11 16:16:03 发布

转载最新推荐文章于 2025-09-11 16:16:03 发布 · 4.7k 阅读

12 ·

CC 4.0 BY-SA版权

原文链接：https://blog.youkuaiyun.com/weixin_49210760/article/details/115937851

文章标签：

#css #html #svg #vue #elementui

element ui 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了如何修改Element UI表格的滚动条样式，包括全局样式调整，以及针对IE浏览器的特殊处理，还涵盖了无数据时的提示文字定制和CSS优化技巧。

el-table 滚动条的修改（全是在全局样式中定义）

单独修改elementui 组件滚动条的样式

  // 滚动条的宽度
  /deep/ .el-table__body-wrapper::-webkit-scrollbar {
    width: 6px; // 横向滚动条
    height: 6px; // 纵向滚动条 必写
  }
  // 滚动条的滑块
  /deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
    background-color: #ddd;
    border-radius: 3px;
  }

还可以无视组件，直接在全局应用于任何地方（此方法不使用与IE浏览器）

::-webkit-scrollbar {
  width: 6px;
  height: 8px;
  background-color: #ebeef5;
}
::-webkit-scrollbar-thumb {
  // border-radius:2px;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
  background-color: #ccc
}
::-webkit-scrollbar-track{
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 3px;
  background: rgba(255, 255, 255, 1);
}

IE浏览器修改滚动条的样式

html,body 
{
  
    SCROLLBAR-FACE-COLOR:#e8f4ff;        /*立体滚动条凸出部分的颜色*/
    SCROLLBAR-HIGHLIGHT-COLOR:#ffffff;    /*滚动条空白部分的颜色*/
    SCROLLBAR-SHADOW-COLOR:#0066cc;        /*立体滚动条阴影的颜色*/
    SCROLLBAR-ARROW-COLOR:#0066cc;        /*上下按钮上三角箭头的颜色*/
    SCROLLBAR-BASE-COLOR:#FFF0E1;       /*滚动条的基本颜色*/
    SCROLLBAR-DARK-SHADOW-COLOR:#ffffff;/*立体滚动条强阴影的颜色*/
    
    font-size: 9pt;
    color: #003366;
    overflow:auto; /*设置或获取表明当内容超出对象高度或宽度时如何管理对象内容的值。*/

}

以上修改有时候会造成表格头部会有一个缝隙解决代码如下

.tableContent{
  padding: 20px !important;
  background: #ffffff;
  margin-top: 20px;
}
body .el-table th.gutter{
  display: table-cell!important;
}
body .el-table colgroup.gutter{
  display: table-cell!important;
}

一.修改table表格无数据时默认显示文字
官方提供的api
empty-text 空数据时显示的文本内容，也可以通过 slot=“empty” 设置 String — 暂无数据

<el-table
  :data="tableData"
  empty-text="你要想显示文字"
>
  .....
</el-tale>

二.更改提示文字并添加图片
当我们需要更改文字并添加图片，则需要使用 slot=‘empty’ 属性。代码如下：

<el-table
  :data="tableData"
>
  <template slot="empty">
    <img src="https://magpie-pic.oss-cn-shenzhen.aliyuncs.com/c8c6da04dcb6e688749baa046262fe8d.gif" alt="" srcset="">
    <span>没有信息</span>
  </template>
  .....
</el-tale>

三、修改 CSS 信息
我们通过重新 element-ui 样式，然后覆盖掉原来的样式信息，这样可以全局一下子处理样式。只需要修改 el-table__empty-block 样式信息即可，代码如下：

.el-table__empty-block{
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABACAMAAADbASJGAAABPlBMVEUAAADX19fa2trZ2dna2trZ2dn19fX19fXt7e319fX19fX19fXb29vZ2dnZ2dn29vb19fX29vb8/PzY2NjZ2dn29vb19fX19fXZ2dnZ2dnZ2dnZ2dn19fXa2tra2tr4+Pja2tr19fXZ2dn29vbb29vZ2dn19fX29vb19fXZ2dn19fX19fXZ2dn29vb29vbX19f29vbi4uLZ2dnj4+Ph4eHZ2dnZ2dnZ2dn29vb09PTZ2dn19fXa2trZ2dn19fXZ2dn19fX19fX29vb19fXZ2dn09PTY2Nj19fXa2tr39/fX19fd3d3Z2dnY2Nj19fXZ2dn29vbh4eH09PT29vbY2NjZ2dnZ2dn09PTY2NjZ2dn09PT19fXX19f6+vr19fXZ2dnp6eni4uLo6Ojg4ODk5OTx8fHt7e3r6+v4+Pjd3d2+WHiwAAAAXXRSTlMAQL+/74DlRhnp1bf85qKLfmMRBvv18KGHamFQTEszLh/89dzc186+sq2ZlV1XUjc2KCUR9OzSzMfBtLCpmpGOgHpxbmdfVT06Hgz84NPFxLGwqKeYk3h2dnFdSi2FEAZaAAACXElEQVRYw+3U11LjQBCF4WMbW3LC2YAxxuScc1xy2JyzuiUHDO//AqsLahEYSyNpuKH4rlXzV7V6Bk6WA46q8GdgjAWsl+BDhbtLAUd9YzwAz/5yCCKWhnkZHq3wW4jJMefgzXAeopY5CU9GWYWwAIfgwQcOwIUSf4Nru3wCV8LcB5d6+RVc6na7yH08BddCXIEL/RyEe7lRrkJYJf8OXlTzYznhS5hMrsCTBfEpb+Qv4FG/6L5s8yw8O+HvELDHv+BDmEsiH/XClz0ecL4gX+HTdteC04+bgl/qxnrVdgXXgq/hWyUZsjuli9vsOq7abJDbhOwihv7QKoed3sWE8ZBDRGvTGF6CjQtuaG1cR5r2O93LTQkRLdFtO62EJiNiBGEjaEiJNNZgo6smJaLzGTr6yU0pkes3yX50cMarmpSI1kxwsANONCVFNNKNDlqkeY+Ie4k8h0hQViT8EnmJPNvI0qisyKdLPCY7vx+juqxIjcZT5SzuW9yPkklixBRNDeLO3CSZpEdMPcptYjBO9FQRM3MJ02mB/jNupDSuLRGKngIKWdT4WkaEWCeLc8TJ4oqvZETMY8hiBhNkVa/LiNTrZDWNObJqccN/o8EtsioDM2RV45uG7kvthnW6Py3T7yhZ6Ab7ZLTIIjZ/e1FSEXoiscPs3cN1/J6ewEQmh3uUdLxIEhV3DhU85vzHRymDi+wcL8KOWk5P+ihFJtNlFUJUJXPQMzEyRMIKsXjPQUZR4Z66+Gcuc5ROTX+Ob22Ox0Yi0WJhaKhQjEZGYuObW/Ev06n0UWZeGczCzj/Kd2oUicxurAAAAABJRU5ErkJggg==");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 75px;
  margin-top: 25px;
  margin-bottom: 60px;
  span{
    position: relative;
    top: 50px;
  }
}

textarea 组件修改样式或者input组件

.el-textarea__inner, .el-input__inner {
	background-color: transparent !important;
	color: #fff !important;
	...
}

记忆力不好，将来能会看，慢慢回味