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
}
}
}
}
},
效果: