element 日期选择器添加按钮

Invincible。

已于 2022-04-19 11:22:02 修改

阅读量2.7k

点赞数

文章标签： javascript

于 2022-04-19 09:42:02 首次发布

本文链接：https://blog.youkuaiyun.com/qq_43605695/article/details/124265976

版权

本文介绍了如何在Element UI的日期选择器中动态添加和移除按钮。在日历组件循环显示时遇到问题，原有的方法只能修改首次点击的日历。通过优化，实现了在选择框聚焦时为所有日历添加按钮，并在失去焦点时自动移除这些按钮。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现如图

datePickerFocus() {
      // 简单写个判断避免重复创建
      if (!this.insertButton) {
        this.$nextTick(() => {
          // 获得要插入的目标dom 这一步要靠控制台筛选元素自己去找到位置进行筛选，每个组件都不同
          const targetEl = document.querySelector(
            ".el-picker-panel__footer"
          );
          // 创建清空按钮 可以自定义类跟样式
          const btn = document.createElement("button");
          btn.className =
            "el-button el-picker-panel__link-btn el-button--text el-button--mini";
          btn.innerHTML = "永久";

          // 把清空按钮插入目标dom的前面
          targetEl.insertBefore(btn, targetEl.children[0]);

          // 避免重复创建标记
          this.insertButton = true;

          // 监听按钮点击事件 这里是点击了把值清空
          btn.onclick = () => {
          console.log( this.messageInfo[indexNum].messageVos);

最低0.47元/天解锁文章