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'
  },
相关推荐
摸鱼仙人~44 分钟前
styled-components:现代React样式解决方案
前端·react.js·前端框架
sasaraku.1 小时前
serviceWorker缓存资源
前端
RadiumAg2 小时前
记一道有趣的面试题
前端·javascript
yangzhi_emo2 小时前
ES6笔记2
开发语言·前端·javascript
yanlele3 小时前
我用爬虫抓取了 25 年 5 月掘金热门面试文章
前端·javascript·面试
中微子4 小时前
React状态管理最佳实践
前端
烛阴4 小时前
void 0 的奥秘:解锁 JavaScript 中 undefined 的正确打开方式
前端·javascript
中微子4 小时前
JavaScript 事件与 React 合成事件完全指南:从入门到精通
前端
Hexene...4 小时前
【前端Vue】如何实现echarts图表根据父元素宽度自适应大小
前端·vue.js·echarts
初遇你时动了情4 小时前
腾讯地图 vue3 使用 封装 地图组件
javascript·vue.js·腾讯地图