devbox
繁依Fanyi0
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

修改引用插件的样式引用elementui/修改elinput、eltooltip、el-table、Paginatio/elselect下拉框样式、elpoppover_el-picker-panel样式修改

作者：繁依Fanyi0 | 2024-05-25 17:31:16

赞

踩

el-picker-panel样式修改

element plus下拉框样式修改

在这里插入图片描述

  1. <el-form-item label="统计频度" >
  2.   <el-select v-model="value" placeholder="请选择" popper-class="selectStyle" >
  3.     <el-option
  4.     v-for="item in options"
  5.             :key="item.value"
  6.             :label="item.label"
  7.             :value="item.value">
  8.    </el-option>
  9.   </el-select>
  10. </el-form-item>

 在这里插入图片描述

查看项目里有没有引用elementui。全局引用方法在官网可见

局部引用：

五、下拉框的样式修改 /时间组件eldataPicker修改

  1. <el-date-picker
  2. 	type="date"
  3. 	v-model="valueStart"
  4. 	value-format="yyyy-MM-dd"
  5. 	placeholder="开始时间" >
  6.  </el-date-picker>

在这里插入图片描述

 2、调高度、颜色

  1. ::v-deep .el-input__inner {
  2. 	  background-color: transparent !important;
  3. 	  border-color:red;
  4. 	  box-shadow: 1px 1px 5px 1px  RGB(128,255,255,0.8) inset;
  5. 	  height: 30px;
  6. 	}
  1. ::v-deep .el-input__icon {
  2. 	    line-height: 30px;
  3. 	}

 在这里插入图片描述

 

 但日历图表没有垂直居中，反而有些靠下.调日历图标位置.把行高设为与日期框一样的高度就OK了，我这里日期框高是30px

在这里插入图片描述

在这里插入图片描述 

 

4、调日历面板 

首先自定义一个样式名elDatePicker

  1. <el-date-picker
  2. 	popper-class="elDatePicker"
  3. 	type="date"
  4. 	v-model="valueStart"
  5. 	placeholder="开始时间">
  6. </el-date-picker>

 然后在全局样式中定义该样式，我这个全局样式文件叫style.scss,在组件中引用这个全局样式

  1. <style scoped  lang="scss">
  2. @import url("../../../../assets/style.scss");
  3.  
  4. </style>

在style.scss文件中写样式

  1. .elDatePicker.el-picker-panel {
  2.   color: #fff;//设置当前面板的月份的字体为白色，记为1
  3.   background: #002450;//定义整体面板的颜色
  4.   border: 1px solid #1384b4;//定义整体面板的轮廓
  5.   .el-picker-panel__icon-btn {//设置年份月份调节按钮颜色，记为2
  6.     color: #ffffff;
  7.    }
  8.   .el-date-picker__header-label{//设置年月显示颜色，记为3
  9.   	color: #ffffff;
  10.   }
  11.   .el-date-table th {//设置星期颜色，记为4
  12.       color:#ffffff;
  13.   }
  14.   
  15. }

 效果

在这里插入图片描述

 在这里插入图片描述

 在修改日期框样式时，上述代码的.el-input__inner，.el-input__icon没有指明是哪个输入框，哪个图标，如果这样用的话，会污染其它框以及图标的样式，因此，可以指明是时期选择器

 

  1. ::v-deep .el-date-editor.el-input.el-input--prefix.el-input--suffix.el-date-editor--date{
  2. 		
  3. 	 input{//输入框，想当于.el-input__inner
  4. 			background-color: transparent !important;
  5. 			border-color:#80ffff;
  6. 			box-shadow: 1px 1px 5px 1px  RGB(128,255,255,0.8) inset;
  7. 			color:#ffffff;
  8. 			height: 30px;	
  9. 		  }
  10. 	.el-input__icon {//日历图标
  11. 			    line-height: 30px;
  12. 			}	
  13. 	}

加入这个属性 :popper-append-to-body="false"
注：这个属性加上scpe也可以用

四、el-toolip

修改tooltip样式

  1.  
  2.  
  3.  
  4. <template #default="scope">
  5.      <el-tooltip :content="scope.row.projBrief" placement='top' effect='light' >
  6.         <p class="changeTooltip">{{scope.row.projBrief}}</p>
  7.      </el-tooltip>
  8. </template>
  9. <style >
  10.   
  11. .el-tooltip__popper{
  12.         background: rgba(32, 32, 32, .8) !important;
  13.         color:white;
  14.         max-width:500px;
  15.   
  16.   }
  17.    
  18. .el-tooltip__popper[x-placement^=top] .popper__arrow:after{
  19.         border-top-color:  #595959 !important}
  20. </style>
  1.  <el-tooltip popper-class="economicsReminder-tooltip" :content="item.demandContent" effect="light">
  2.         <div class="style"                            
  3.            {{item.demandContent}}
  4.         </div>
  5. </el-tooltip>
  1. <el-tooltip popper-class="left-bottom2-tooltip" 
  2.             :content="'数据来源:' + (this.currentList.dataSources===''?'-- 
  3.             ':this.currentList.dataSources)+';'+'时效范围:' + 
  4.             (this.currentList.limitRange===''?'--':this.currentList.limitRange)+';'+'更新频 
  5.             率:' +(this.currentList.updateFrequency===''?'-- 
  6.              ':this.currentList.updateFrequency)+';'"
  7.                   effect="light">
  8.         <p class="p-title">各行业用电量</p>
  9.  </el-tooltip>

五、el-table

1、 表头和文字可以居中显示：
1、在el-table标签中加入
                        : header-cell-style=“{ ‘text-align’: ‘center’ }”
                        : cell-style=“{ ‘text-align’: ‘center’ }”

  1. <el-table
  2.   : data="tableData"
  3.   stripe
  4.   border
  5.   highlight-current-row
  6.   : header-cell-style="{ 'text-align': 'center' }"
  7.   : cell-style="{ 'text-align': 'center' }"
  8.   style="width: 100%; margin-top: 8px; text-align: center"
  9. >
  10.   <el-table-column label="序号" type="index" width="80">
  11.   </el-table-column>
  12.   <el-table-column prop="title" label="标题"> </el-table-column>
  13.   <el-table-column prop="num" label="数量" sortable width="100">
  14.   </el-table-column>
  15. </el-table>

2、背景色修改。边框色修改：

  1. /deep/ .el-table,
  2.  
  3. .el-table__expanded-cell {
  4.  
  5.   background-color: transparent;
  6.  
  7. }
  8.  
  9. /deep/.el-table th {
  10.  
  11.   background: rgba(70, 114, 255, 0.2) !important;
  12.  
  13. }
  14.  
  15. /deep/.el-table tr {
  16.  
  17.   background-color: rgba(15, 19, 30, 0.8) !important;
  18.  
  19. }
  20.  
  21. /deep/.el-table--enable-row-hover .el-table__body tr:hover > td {
  22.  
  23.   background-color: #212e3e !important;
  24.  
  25. }

3、el-table 去除表格透明时最下面的线 ：

  1. .el-table::before{
  2.     height:0;
  3.   }

4、table行与行之间的间距： 

  1. ::v-deep .el-table__body{
  2.   //-webkit-border-horizontal-spacing: 13px;  // 水平间距
  3.   -webkit-border-vertical-spacing: 13px;  // 垂直间距
  4. }

5、el-table设置单元格里的字体颜色（也可以设置单元格其他属性/设置整行整列样式）

例如图中，设置某个单元格的字体颜色：

在这里插入图片描述

 ① el-table标签上添加属性：:cell-style=“cellStyle”

<el-table :data="tableData" :cell-style="cellStyle" border stripe fit>

②vue文件里在method里声明 cellStyle方法

  1. cellStyle({ row, column, rowIndex, columnIndex }) {
  2.       if (columnIndex === 0 || columnIndex === 1) {
  3.         return "font-weight:700;color:#FF6100 ";
  4.       }
  5.       return "";
  6.     }

6、eltable 鼠标移入加背景颜色

  1.  
  2. 鼠标移入整行加背景颜色
  3. <style lang="scss" scoped>
  4. .el-table {
  5.     /deep/tbody tr:hover>td { 
  6.         background-color:#90c0f1; 
  7.     }	
  8. }
  9. </style>
  10.  
  11. 鼠标移入只有当前的单元格加背景颜色
  12.  
  13.    <style lang="scss" scoped>
  14.  .el-table.changeTab{
  15.     /deep/tbody td:hover { 
  16.         background-color:#d6e7f8!important;
  17. </style>

六、翻页样式Pagination ：

  1.   /deep/ .el-pagination {
  2.                         text-align: center;
  3.                         margin-top: 4px;
  4.  
  5.                         .btn-prev,
  6.                         .btn-next {
  7.                             min-width: 20px;
  8.                             margin: 0 4px;
  9.                             height: 23px;
  10.                             line-height: 23px;
  11.                             font-size: 12px;
  12.                             background: transparent;
  13.                             color: #10668e;
  14.  
  15.                             &:hover {
  16.                             color: #7bc6fb;
  17.                             }
  18.                         }
  19.  
  20.                         .el-pager {
  21.                             li {
  22.                             background: transparent;
  23.                             color: #10668e;
  24.                             min-width: 20px;
  25.                             margin: 0 4px;
  26.                             height: 23px;
  27.                             line-height: 20px;
  28.                             font-size: 12px;
  29.                             }
  30.  
  31.                             li.active,
  32.                             li:hover {
  33.                             border: 1px solid #0b75b3;
  34.                             border-radius: 2px;
  35.                             color: #7bc6fb;
  36.                             }
  37.                         }
  38.  
  39.                         button:disabled,
  40.                         button:disabled:hover {
  41.                             background: transparent;
  42.                             color: rgba(16, 102, 142, 0.6);
  43.                         }
  44.                         }

七、elpoppover样式

  1. //背景色以及位置调整
  2. .el-popover{
  3.     background-color: rgba(13, 46, 87,1) !important;
  4.     color:#fff;
  5.     border:transparent;
  6.     width: 80px;
  7.     left: 1700px !important;
  8.     border:solid 1px rgba(9, 105, 186,1)
  9. }
  10. //三角符号边框颜色调整
  11. .el-popper[x-placement^=bottom] .popper__arrow{
  12.     border-bottom-color: rgba(9, 105, 186,1)!important;
  13. }
  14. //三角符号背景色调整
  15. .el-popper[x-placement^=bottom] .popper__arrow::after{
  16.     border-bottom-color: rgba(13, 46, 87,1)!important;
  17.     
  18. //三角符号位置调整
  19. }
  20. .popper__arrow{
  21.     background: transparent;
  22.     left: 117.5px!important;
  23.     border:solid 1px rgba(9, 105, 186,1)
  24. }

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/繁依Fanyi0/article/detail/623043
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号