el-date-picker后置图标 prefix-icon

### 修改 `el-date-picker` 前缀图标并实现后置图标的解决方案 在 Element-UI 中，可以通过调整组件的属性以及样式来实现自定义前后置图标的功能。以下是具体的方法： #### 方法一：通过 `prefix-icon` 和 `suffix-icon` 属性设置 Element-UI 提供了两个用于控制图标的属性： - **`prefix-icon`**: 设置前缀图标。 - **`suffix-icon`**: 设置后缀图标。 可以直接在 `<el-date-picker>` 组件中指定这两个属性，从而改变默认的图标显示位置[^1]。 ```vue <template> <el-form-item> <el-date-picker v-model="dateRange" suffix-icon="el-icon-date" <!-- 后置图标 --> size="small" style="width: 240px; margin-left: 22px;" value-format="yyyy-MM-dd" type="daterange" prefix-icon="" <!-- 清空前置图标 --> range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"> </el-date-picker> </el-form-item> </template> <script> export default { data() { return { dateRange: [] // 初始化日期范围为空数组 }; } }; </script> ``` 上述代码中，设置了 `suffix-icon="el-icon-date"` 来作为后置图标，并清除了默认的前缀图标 `prefix-icon=""`。 --- #### 方法二：动态修改 DOM 节点中的类名 如果需要更灵活的方式来自定义图标的位置和行为，可以利用 JavaScript 动态操作 DOM 结构，在挂载阶段完成对图标的重新定位[^2]。 ```javascript mounted() { this.$nextTick(() => { const closeIcon = document.querySelector('.el-range__close-icon'); if (closeIcon) { closeIcon.className += ' el-icon-date'; // 将关闭按钮替换为日期图标 } const iconEl = document.querySelector('.el-range__icon'); if (iconEl) { iconEl.style.display = 'none'; // 隐藏原有的前缀图标 } }); } ``` 此方法适用于希望完全移除原有图标或者进一步定制样式的场景。 --- #### 方法三：使用 CSS 穿透覆盖样式 对于某些情况下无法直接通过模板或脚本解决问题的情况，还可以借助 SCSS/Less 的穿透语法 (`::v-deep`) 完成样式上的隐藏与重设[^3]。 ```css <style lang="less" scoped> // 使用 ::v-deep 实现样式穿刺 ::v-deep .el-range__icon { display: none !important; /* 移除原生前缀图标 */ } ::v-deep .el-range-editor .el-input__suffix { position: absolute; right: 8px; /* 自定义后置图标距离右侧边缘的距离 */ } </style> ``` 以上方式能够有效解决因封装限制而导致的部分功能缺失问题。 --- ### 总结 综合来看，推荐优先采用 **方法一** 即直接配置 Vue 模板内的 `prefix-icon` 及 `suffix-icon` 属性；而当遇到特殊需求时，则考虑结合 **方法二** 或者 **方法三** 进一步增强灵活性。