下拉框添加新增选项按钮

• 效果图
• • 代码

效果图

代码

<template>
	<el-select v-model="submitData.src_type"
	           ref="template"
	           style="width:370px"
	           @visible-change="(v)=>visibleChange(v,'template')"  >
	       <el-option v-for="(item,index) in sourceList"
	                  :key="index"
	                  :label="item.name"
	                  :value="item.value">
	              <span style="float:left" class="span-style">{{item.name}}</span>
				  <span style="float:right" class="span-style" @click.stop="delitem(index)">
				  <i class="el-tag_close el-icon-close"/>
				  </span>
				  <div class="flag" @click="showShipTemplate(index,true)">
				  </div>
	        </el-option>
	 </el-select>
</template>
<script lang="ts">
  delitem(index){
      let vm=this as any
      vm.sourceList.splice(index,1)
    }
   visibleChange(visible,refName){
  if(visible){
    let vm=this as any
    const ref=vm.$ref[refName];
    let popper=ref.$refs.popper;
    if(popper.$el)popper=popper.$el;
    if(!Array.form(popper.children).some(
     (v)=>v.className==='el-template-menu_list'
   ){
     const el=document.createElment('ul');
     el.className='el-template-menu_list';
     el-style="border-top:2px solid grey;padding:0; color:grey; font-size：13px";
     el-innerHtml=`<li class="el-cascader-node text-center" style="height:37px;line-height:50px;margin-left:10px;">
     <span class="el-cascader-node_label"><i class="font-blue el-icon-plus"></i>新增</span>
     </li>`;
     popper.apendChild(el);
     el.onclick=()=>{
      vm.showShipTemplate(null,false)
      }
   })
  }
   
 }
  showShipTemplate(){
	let vm=this as any
	 vm.$showDialog({
      title:'新增来源选项',
      buttons:[{
       label:'确定',
       cssClass:'btn-primary',
       action:(dialogVNode,formDialog) =>{
          let form=formDialog.$refs.addform;
          let data=form.getDate()
          vm.sourceList.push({name:data,value:data})
          dialogVNode.close()
        } 
      },{
        label:'取消'，
        action:(dialogVNode)=>{
         dialogVNode.clse();
      }
     }],
     vueOptions:{
      template:'<AddCheck ref="addform" @appendSource="appendFn" />'
      components:{
       AddCheck
     },
    }
    })
  }
</script>