elementui时间日期组件右边自定义图标

效果

改为

首先是将左边的清除图标关闭

然后是将右边的图标设置为display:none,设置宽度,左右内边距

最后是

js 复制代码
  mounted() {
    /*
      思路:通过document文档,选中日期时间选择器元素,然后创建一个i标签,
            并指定其类名为el-icon-date,并将其插入到日期时间选择器元素中
            然后通过样式的控制调整其到时间选择器尾部的位置
     */
    const keyNode = document.querySelector('.el-date-editor')
    const iNode = document.createElement('i')
    iNode.setAttribute('class', 'el-icon-arrow-down')
    keyNode.appendChild(iNode)
    iNode.style.position = 'absolute'
    iNode.style.top = '10px'
    iNode.style.right = '8px'
  },
相关推荐
Highcharts.js11 分钟前
Highcharts 使用指南Treegraph chart 树状图/结构树图|创建谱系图表、决策树、结构知识树等的图表工具
javascript·决策树·highcharts·图表开发·结构树·可视化图表库·谱系图表
进击切图仔13 分钟前
执行 shell 脚本 5 种方式对比
前端·chrome
局i13 分钟前
React 简单地图组件封装:基于高德地图 API 的实践(附源码)
前端·javascript·react.js
执行部之龙24 分钟前
AI对话平台核心技术解析
前端
进击的尘埃26 分钟前
Service Worker + stale-while-revalidate:让页面"假装"秒开的正经方案
javascript
yuki_uix27 分钟前
防抖(Debounce):从用户体验到手写实现
前端·javascript
HelloReader29 分钟前
Flutter 进阶 UI搭建 iOS 风格通讯录应用(十一)
前端
张元清30 分钟前
每个 React 开发者都需要的 10 个浏览器 API Hooks
前端·javascript·面试
进击的尘埃32 分钟前
给 Claude Code 造个趁手的 MCP Tool Server,聊聊我踩的那些坑
javascript
HelloReader32 分钟前
Flutter ListenableBuilder让界面自动响应数据变化(十)
前端