废话少说，先上图
image.png
el-date-picker的icon默认是居左显示，坑就坑在，elment竟然没有提供放居右显示的api。
但是，ui的设计又需要居右显示。没办法，只好css+js各显神通的去实现这个功能。闲言少叙，我直接上代码
css方式：
// dom层：
<el-form-item label="时间：">
<el-date-picker type="date"
suffix-icon="el-icon-date"
placeholder="选择日期"
v-model="time"
class="datepicker"
style="width: 100%;">
</el-date-picker>
</el-form-item>
// css层：
.el-date-editor {
.el-input__prefix {
position: absolute;
left: 282px; // left根据实际情况定值
top: 0;
}
input {
padding-left: 15px;
}
}
image.png
image.png
要解决这个问题需要使用js方式。
js方式：
// dom层
<el-form-item label="实际到账时间：">
<div class="date-box" style="width: 100%;"
@mouseover="onMouseOver()" @mouseleave="onMouseleave()">
<el-date-picker type="date"
prefix-icon="''"
placeholder="选择日期"
v-model="comfirmForm.name"
class="datepicker"
style="width: 100%;">
</el-date-picker>
<i class="el-icon-date" ref="iconDate"></i>
</div>
</el-form-item>
// js 层
onMouseOver() {
this.$refs.iconDate.style.display = 'none';
},
onMouseleave() {
this.$refs.iconDate.style.display = 'block';
},
// css层：
.datepicker {
/deep/.el-input__inner {
padding-left: 15px;
}
}
.date-box {
position: relative;
width: 100%;
width: fit-content;
.el-icon-date {
position: absolute;
top: 50%;
right: 10px;
z-index: 9;
color: #c0c4cc;
font-size: 14px;
transform: translateY(-50%);
}
/deep/ .el-range__close-icon {
position: absolute;
right: 34px;
top: 54%;
transform: translateY(-50%);
}
}
默认显示dateicon，当鼠标经过时，dateicon消失，会显示el-date-picker自带的clearicon
image.png
image.png
