Element-ui DateTimePicker时间选择器（el-date-picker）图标icon位置居右日期控件图标居右。图标icon重叠解决方案_elementui日期选择器图标位置

作者：很楠不爱3 | 2024-04-20 22:40:55

踩

elementui日期选择器图标位置

注意看重点！因为prefix-icon右侧时候，会和关闭icon重叠，所以换思路。直接有数据时候，隐藏设置prefix-icon为空，多打几个空格即可


 
 
  <el-date-picker v-model="searchFormData.publishTime" 
    type="datetimerange" 
    :prefix-icon="searchFormData.publishTime ? '   ' : 'el-icon-date'"
  </el-date-picker>

CSS部分，right值根据项目灵活调整即可。


 
 
::v-deep .el-icon-date {
  position: absolute;
  right: 25px;
}

OK调整完成！

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

Element-ui DateTimePicker时间选择器（el-date-picker） 图标icon位置居右 日期控件图标居右。图标icon重叠解决方案_elementui日期选择器图标位置

Element-ui DateTimePicker时间选择器（el-date-picker）图标icon位置居右日期控件图标居右。图标icon重叠解决方案_elementui日期选择器图标位置