element Select 选择器下拉框中添加按钮

html:

        <el-select style="left: 15px" v-model="shipTemplateId"
                         ref="template"
                         @change="selectTemplate($event,templateType.ship)"
                         @visible-change="v => visibleChange(v,'template',  templateType.ship)">
                <el-option
                  v-for="template in shipTemplates"
                  :key="template.id"
                  :label="template.title"
                  :value="template.id"
                >
                  <span style="float: left" class="span-style">{{ template.title }}</span>
                  <div class="flag">
                    <svg-icon icon="edit" iconClass="template_edit_style" @click="showShipTemplate(template.id,true)"/>
                  </div>
                </el-option>
              </el-select>

JavaScript:

      visibleChange(visible, refName,type) {
        if (visible) {
          const ref = this.$refs[refName]
          let popper = ref.$refs.popper
          if (popper.$el) popper = popper.$el
          if (!Array.from(popper.children).some(v => v.className === 'el-template-menu__list')) {
            const el = document.createElement('ul')
            el.className = 'el-template-menu__list'
            el.style = 'border-top:2px solid rgb(219 225 241); padding:0; color:rgb(64 158 255);font-size: 13px'
            el.innerHTML = `<li class="el-cascader-node text-center" style="height:37px;line-height: 50px">
                <span class="el-cascader-node__label"><i class="font-blue el-icon-plus"></i> Add Template</span>
                </li>`
            popper.appendChild(el)
            el.onclick = () => {
              if(type==="Ship"){
                this.showShipTemplate(null,false)
              }else {
                this.showReturnTemplate(null,false)
              }
              if (ref.toggleDropDownVisible) {
                ref.toggleDropDownVisible(false)
              } else {
                ref.visible = false
              }
            }
          }
        }
      },

效果:
在这里插入图片描述

  • 5
    点赞
  • 19
    收藏
    觉得还不错? 一键收藏
  • 14
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 14
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值