el-date-picker的自定义后置图标
时间: 2023-11-21 22:58:47 浏览: 150
自定义DatePicker样式
4星 · 用户满意度95%
以下是el-date-picker自定义后置图标的方法:
```html
<el-form-item>
<el-date-picker
v-model="dateRange"
suffix-icon="your-icon-class"
size="small"
style="width: 240px;margin-left:22px;"
value-format="yyyy-MM-dd"
type="daterange"
range-separator="-"
start-placeholder="开始日期"
end-placeholder="结束日期"
/>
</el-form-item>
```
其中,`suffix-icon`属性用于设置后置图标的类名,你可以自定义一个类名,然后在CSS中设置该类名的样式即可。例如:
```css
.your-icon-class {
background-image: url('your-icon-url');
background-size: contain;
width: 20px;
height: 20px;
}
```
这里的`.your-icon-class`就是你自定义的类名,`background-image`属性用于设置图标的URL,`background-size`属性用于设置图标的大小,`width`和`height`属性用于设置图标的宽度和高度。
阅读全文