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

最新推荐文章于 2025-03-21 17:22:30 发布

Dragonfly_w

最新推荐文章于 2025-03-21 17:22:30 发布

阅读量4.5k

点赞数 1

分类专栏： element ui 文章标签： css html svg vue elementui

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

版权

element ui 专栏收录该内容

1 篇文章

订阅专栏

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

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