element-ui下拉框添加添加数据按钮（自用）

<el-select
v-model="form.labels"
multiple
:placeholder="$t('goods.qxz_content')"
ref="template"
@visible-change="(v) => visibleChange(v, 'template')"
>
<el-option
v-for="(item, index) in labelslist"
:key="item.code"
:label="item.value"
:value="item.value"
>
<span style="float: left" class="span-style">{{ item.value }}</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(item.code, true)"></div>
</el-option>
</el-select>

 data() {
return {
labelslist: [],
};
},
methods: {
delitem(index) {
this.labelslist.splice(index, 1);
},
// 添加商品标签
showShipTemplate() {
this.$prompt("请输入新的商品标签", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
}).then(({ value }) => {
this.labelslist.push({ code: this.labelslist.length, value: value });
});
},
visibleChange(visible, refName) {
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;margin-left:10px;">
<span class="el-cascader-node__label"><i class="font-blue el-icon-plus"></i> 添加商品标签</span>
</li>`;
popper.appendChild(el);
el.onclick = () => {
this.showShipTemplate(null, false);
};
}
}
},
},

最后

以上就是欣慰帅哥为你收集整理的element-ui下拉框添加添加数据按钮（自用）的全部内容，希望文章能够帮你解决element-ui下拉框添加添加数据按钮（自用）所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。