elementui select组件下拉框底部增加自定义按钮

elementui select组件下拉框底部增加自定义按钮

el-select组件的visible-change 事件(下拉框出现/隐藏时触发)

javascript 复制代码
<el-select
    ref="select"
    :value="value"
    placeholder="请选择"
    @visible-change="visibleChange"
  ></el-select>

visibleChange(visible) {
      // 下拉框显示隐藏
      if (visible) {
        const ref = this.$refs.select
        let popper = ref.$refs.popper
        if (popper.$el) popper = popper.$el
        // 判断是否有添加按钮
        if (!Array.from(popper.children).some(v => v.className === 'btn-box')) {
          const el = document.createElement('div')
          el.className = 'btn-box'
          el.innerHTML = `<a class="btn" style="font-size:16px;display:block;line-height:38px;text-align:center;">
                            <i class="el-icon-plus"></i>添加
                          </a>`
          popper.appendChild(el)
          el.onclick = () => {
            // todo
          }
        }
      }
    },
相关推荐
全马必破三1 小时前
CSS 和 JS 如何阻塞浏览器渲染 DOM
javascript
c***V3232 小时前
Vue优化
前端·javascript·vue.js
努力往上爬de蜗牛3 小时前
react native真机调试
javascript·react native·react.js
李@十一₂⁰4 小时前
HTML 特殊字体符号
前端·html
y***86694 小时前
TypeScript在Electron应用中的使用
javascript·typescript·electron
小奶包他干奶奶6 小时前
Webpack学习——Loader(文件转换器)
前端·学习·webpack
zy happy6 小时前
若依 vue3 报错:找不到模块“@/api/xxxx/xxxxx”或其相应的类型声明。。Vue 3 can not find mod
前端·javascript·vue.js
潘小安7 小时前
Git Worktree + Claude Code:让你的开发效率翻倍的秘密武器
前端
meichaoWen7 小时前
【Vue3】vue3的全面学习(一)
前端·javascript·学习
小猪努力学前端7 小时前
在 React + React Router v7 SSR 项目里做多端适配,我踩的两个坑
前端·react.js