1、首先给时间筛选器宽度设置100%,且padding设置为0,不然会影响样式
<template>
<el-date-picker
v-model="value"
style="width: 100%;padding: 0"
type="daterange"
align="right"
unlink-panels
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
/>
</template>
2、由于padding设置为0,时间选择器的前置图标及清空图标样式会有影响,如下图所示
可以样式穿透修改图标边距样式如下代码:
<style scoped lang="scss">
::v-deep .el-range__icon {
padding-left: 10px;
}
::v-deep .el-range__close-icon {
padding-right: 10px;
}
</style>
3、修改完成后的效果如下