【精选】一文图解自定义修改el

您所在的位置：网站首页 › vivoy52s控制中心怎么修改样式 › 【精选】一文图解自定义修改el

【精选】一文图解自定义修改el

2023-10-23 15:34| 来源: 网络整理| 查看: 265

在这里插入图片描述

我们在使用element UI库的时候，确实给我们带来了许多便利，但是，往往组件库无法满足我们的业务需求，这时就需要我们在组件库的基础上修改样式。

今天水香木鱼一篇图解文章教大家如何在组件库的基础上去修改样式，今天我们以el-table 为例子。👇👇👇

在这里插入图片描述

el-table原代码:

{{ scope.row.date }} 姓名: {{ scope.row.name }} 住址: {{ scope.row.address }} {{ scope.row.name }} 编辑删除 1、💖修改th(头部)的background-color

在这里插入图片描述

// 修改头部背景 ::v-deep .el-table th{ background-color: #ADAD; }

在这里插入图片描述

2、💖修改表头字体颜色 //修改表头字体颜色 ::v-deep.el-table thead { color: #FC5531; font-weight: 500; }

在这里插入图片描述

3、💖修改tr(行)的background-color //修改行背景 ::v-deep .el-table tr{ background-color: yellow; }

在这里插入图片描述

4、💖修改tr(行内线)的background-color //修改行内线 ::v-deep .el-table td,.building-top .el-table th.is-leaf { border-bottom: 1px solid #007ACC; }

在这里插入图片描述

5、💖修改斑马线的background-color(奇偶行背景) //修改行内线 ::v-deep .el-table td,.building-top .el-table th.is-leaf { border-bottom: 1px solid #007ACC; }

在这里插入图片描述

6、💖修改表格最底部background-color和height // 修改表格最底部颜色和高度 ::v-deep .el-table::before { border-bottom: 1px solid red; height: 4px; }

在这里插入图片描述

7、💖修改表格无数据background-color，字体颜色 // 修改表格无数据背景，字体颜色 ::v-deep .el-table__empty-block { background: #16203c; } ::v-deep .el-table__empty-text { color: #ccc; }

在这里插入图片描述

8、💖修改鼠标选中行的background-color //修改鼠标选中行 ::v-deep .el-table__body tr.current-row>td { background: #f57878 ; }

以下效果同上,就不附加效果图了,博友们可自行尝试 🐱‍🐉

9、💖修改行内文字居中（除表头） //修改行内文字居中 ::v-deep .el-table td, .el-table th { text-align: center; } 10、💖修改除表头外的表格内容的背景色 //修改普通行 ::v-deep .el-table tr{ background: #091B37; height:20px; } ::v-deep .el-table--enable-row-transition .el-table__body td, .el-table .cell{ background-color: #091B37; } 11、💖修改行高 //修改行高 ::v-deep .el-table td{ padding:0px 0px; //默认上下是padding12px } 13、💖修改整个表格的水平和垂直滚动条 //水平和垂直滚动条 ::v-deep .el-table--scrollable-x .el-table__body-wrapper { overflow-x: hidden; }

在这里插入图片描述

【本文地址】

【精选】一文图解自定义修改el

【精选】一文图解自定义修改el

今日新闻

推荐新闻