element plus下拉框样式修改
<el-form-item label="统计频度" >
<el-select v-model="value" placeholder="请选择" popper-class="selectStyle" >
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
查看项目里有没有引用elementui。全局引用方法在官网可见
局部引用：
五、下拉框的样式修改 /时间组件eldataPicker修改
<el-date-picker
type="date"
v-model="valueStart"
value-format="yyyy-MM-dd"
placeholder="开始时间" >
</el-date-picker>
2、调高度、颜色
::v-deep .el-input__inner {
background-color: transparent !important;
border-color:red;
box-shadow: 1px 1px 5px 1px RGB(128,255,255,0.8) inset;
height: 30px;
}::v-deep .el-input__icon {
line-height: 30px;
} 
但日历图表没有垂直居中，反而有些靠下.调日历图标位置.把行高设为与日期框一样的高度就OK了，我这里日期框高是30px
4、调日历面板
首先自定义一个样式名elDatePicker
<el-date-picker
popper-class="elDatePicker"
type="date"
v-model="valueStart"
placeholder="开始时间">
</el-date-picker>然后在全局样式中定义该样式，我这个全局样式文件叫style.scss,在组件中引用这个全局样式
<style scoped lang="scss">
@import url("../../../../assets/style.scss");
</style>在style.scss文件中写样式
.elDatePicker.el-picker-panel {
color: #fff;//设置当前面板的月份的字体为白色，记为1
background: #002450;//定义整体面板的颜色
border: 1px solid #1384b4;//定义整体面板的轮廓
.el-picker-panel__icon-btn {//设置年份月份调节按钮颜色，记为2
color: #ffffff;
}
.el-date-picker__header-label{//设置年月显示颜色，记为3
color: #ffffff;
}
.el-date-table th {//设置星期颜色，记为4
color:#ffffff;
}
}
效果
在修改日期框样式时，上述代码的.el-input__inner，.el-input__icon没有指明是哪个输入框，哪个图标，如果这样用的话，会污染其它框以及图标的样式，因此，可以指明是时期选择器
::v-deep .el-date-editor.el-input.el-input--prefix.el-input--suffix.el-date-editor--date{
input{//输入框，想当于.el-input__inner
background-color: transparent !important;
border-color:#80ffff;
box-shadow: 1px 1px 5px 1px RGB(128,255,255,0.8) inset;
color:#ffffff;
height: 30px;
}
.el-input__icon {//日历图标
line-height: 30px;
}
}
加入这个属性 :popper-append-to-body="false"
注：这个属性加上scpe也可以用
四、el-toolip
修改tooltip样式
<template #default="scope">
<el-tooltip :content="scope.row.projBrief" placement='top' effect='light' >
<p class="changeTooltip">{{scope.row.projBrief}}</p>
</el-tooltip>
</template>
<style >
.el-tooltip__popper{
background: rgba(32, 32, 32, .8) !important;
color:white;
max-width:500px;
}
.el-tooltip__popper[x-placement^=top] .popper__arrow:after{
border-top-color: #595959 !important}
</style> <el-tooltip popper-class="economicsReminder-tooltip" :content="item.demandContent" effect="light">
<div class="style"
{{item.demandContent}}
</div>
</el-tooltip><el-tooltip popper-class="left-bottom2-tooltip"
:content="'数据来源:' + (this.currentList.dataSources===''?'--
':this.currentList.dataSources)+';'+'时效范围:' +
(this.currentList.limitRange===''?'--':this.currentList.limitRange)+';'+'更新频
率:' +(this.currentList.updateFrequency===''?'--
':this.currentList.updateFrequency)+';'"
effect="light">
<p class="p-title">各行业用电量</p>
</el-tooltip>五、el-table
1、 表头和文字可以居中显示：
1、在el-table标签中加入
: header-cell-style=“{ ‘text-align’: ‘center’ }”
: cell-style=“{ ‘text-align’: ‘center’ }”
<el-table
: data="tableData"
stripe
border
highlight-current-row
: header-cell-style="{ 'text-align': 'center' }"
: cell-style="{ 'text-align': 'center' }"
style="width: 100%; margin-top: 8px; text-align: center"
>
<el-table-column label="序号" type="index" width="80">
</el-table-column>
<el-table-column prop="title" label="标题"> </el-table-column>
<el-table-column prop="num" label="数量" sortable width="100">
</el-table-column>
</el-table>
2、背景色修改。边框色修改：
/deep/ .el-table,
.el-table__expanded-cell {
background-color: transparent;
}
/deep/.el-table th {
background: rgba(70, 114, 255, 0.2) !important;
}
/deep/.el-table tr {
background-color: rgba(15, 19, 30, 0.8) !important;
}
/deep/.el-table--enable-row-hover .el-table__body tr:hover > td {
background-color: #212e3e !important;
}
.el-table::before{
height:0;
}4、table行与行之间的间距：
::v-deep .el-table__body{
//-webkit-border-horizontal-spacing: 13px; // 水平间距
-webkit-border-vertical-spacing: 13px; // 垂直间距
}5、el-table设置单元格里的字体颜色（也可以设置单元格其他属性/设置整行整列样式）
例如图中，设置某个单元格的字体颜色：
① el-table标签上添加属性：:cell-style=“cellStyle”
<el-table :data="tableData" :cell-style="cellStyle" border stripe fit>②vue文件里在method里声明 cellStyle方法
cellStyle({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 0 || columnIndex === 1) {
return "font-weight:700;color:#FF6100 ";
}
return "";
}6、eltable 鼠标移入加背景颜色
鼠标移入整行加背景颜色
<style lang="scss" scoped>
.el-table {
/deep/tbody tr:hover>td {
background-color:#90c0f1;
}
}
</style>
鼠标移入只有当前的单元格加背景颜色
<style lang="scss" scoped>
.el-table.changeTab{
/deep/tbody td:hover {
background-color:#d6e7f8!important;
</style>六、翻页样式Pagination ：
/deep/ .el-pagination {
text-align: center;
margin-top: 4px;
.btn-prev,
.btn-next {
min-width: 20px;
margin: 0 4px;
height: 23px;
line-height: 23px;
font-size: 12px;
background: transparent;
color: #10668e;
&:hover {
color: #7bc6fb;
}
}
.el-pager {
li {
background: transparent;
color: #10668e;
min-width: 20px;
margin: 0 4px;
height: 23px;
line-height: 20px;
font-size: 12px;
}
li.active,
li:hover {
border: 1px solid #0b75b3;
border-radius: 2px;
color: #7bc6fb;
}
}
button:disabled,
button:disabled:hover {
background: transparent;
color: rgba(16, 102, 142, 0.6);
}
}
七、elpoppover样式
//背景色以及位置调整
.el-popover{
background-color: rgba(13, 46, 87,1) !important;
color:#fff;
border:transparent;
width: 80px;
left: 1700px !important;
border:solid 1px rgba(9, 105, 186,1)
}
//三角符号边框颜色调整
.el-popper[x-placement^=bottom] .popper__arrow{
border-bottom-color: rgba(9, 105, 186,1)!important;
}
//三角符号背景色调整
.el-popper[x-placement^=bottom] .popper__arrow::after{
border-bottom-color: rgba(13, 46, 87,1)!important;
//三角符号位置调整
}
.popper__arrow{
background: transparent;
left: 117.5px!important;
border:solid 1px rgba(9, 105, 186,1)
}
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
