文章来源地址https://www.toymoban.com/news/detail-839596.html
父组件
<el-select
v-model="value"
placeholder="请选择"
ref="add"
@visible-change="
(v) =>
visibleChange(
v,
'add',
//() => {
// categoriesClick(temp);//需要传递参数
// },
categoriesClick,//无需参数
'添加设备'
)
"
>
<el-option
v-for="itemin options"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
<el-dialog
title="添加子选项"
:visible.sync="openOff"
width="70%"
append-to-body
>
<childrenVue
@closeHandle="closeHandle"
/>
</el-dialog>
<script>
import childrenVue from "子组件路径";
export default {
components: { childrenVue },
data() {
return {
openOff:false,
options: [{
value: '选项1',
label: '黄金糕'
}, {
value: '选项2',
label: '双皮奶'
}, {
value: '选项3',
label: '蚵仔煎'
}, {
value: '选项4',
label: '龙须面'
}, {
value: '选项5',
label: '北京烤鸭'
}],
value: ''
}
}
methods:{
// 关闭弹窗（传递给子组件处理弹窗关闭）
closeHandle() {
this.openOff = false;
},
// 弹出添加子选项弹窗(value未传递的参数)
categoriesClick(value) {
this.openOff = true;
},
// 在下拉框处显示添加按钮
visibleChange(visible, refName, onClick, addname) {
if (visible) {
const ref = this.$refs[refName];
let popper = ref[0].$refs.popper;
if (popper.$el) popper = popper.$el;
if (
!Array.from(popper.children).some(
(v) => v.className === "el-cascader-menu__list"
)
) {
const el = document.createElement("ul");
el.className = "el-cascader-menu__list";
el.style =
"border-top: solid 1px #E4E7ED; padding:0; color: #606266;";
el.innerHTML =
`<li class="el-cascader-node text-center" style="height:50px;line-height: 50px">
<span class="el-cascader-node__label"><i class="font-blue el-icon-plus"></i>` +
addname +
`</span>
</li>`;
popper.appendChild(el);
el.onclick = () => {
// 底部按钮的点击事件 点击后想触发的逻辑也可以直接写在这
onClick && onClick();
// 以下代码实现点击后弹层隐藏 不需要可以删掉
if (ref[0].toggleDropDownVisible) {
ref[0].toggleDropDownVisible(false);
} else {
ref[0].visible = false;
}
};
}
}
},
}
}
</script>
子组件
<template>
<div>
<el-button
type="primary"
size="small"
@click="close"
>点击关闭</el-button
>
</div>
</template>
<script>
export default {
data() {
return {
}
}
methods:{
close(){
this.$emit("closeHandle");
}
}
}
</script>
文章来源：https://www.toymoban.com/news/detail-839596.html
到了这里，关于element-ui在下拉选项框中添加一个按钮，实现子选项的添加的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
