废话不多说，直接上效果和代码
效果：在下拉框内就可以实现增删改查效果，不需要另外建立表格；
完整代码如下：
<template>
<div class="select">
<el-form :model="formData" class="form">
<el-form-item label="自带增删改查的下拉框：">
<el-select
v-model="formData.value"
:placeholder="$t('button.select')"
ref="template"
@visible-change="(v) => visibleChange(v, 'template')"
:style="{ width: '300px' }"
filterable
clearable
>
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
>
<span style="float: left" class="span-style">{{ item.label }}</span>
<span
style="float: right"
class="span-style-delete"
@click.stop="deleteItem(item)"
><i class="el-icon-delete"
/></span>
<span
style="float: right"
class="span-style"
@click.stop="editItem(item)"
><i class="el-icon-edit-outline"
/></span>
</el-option>
</el-select>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
data() {
return {
options: [
{
value: 1,
label: "黄金糕",
},
{
value: 2,
label: "双皮奶",
},
{
value: 3,
label: "蚵仔煎",
},
{
value: 4,
label: "龙须面",
},
{
value: 5,
label: "北京烤鸭",
},
],
formData: {
value: "",
},
};
},
methods: {
// 下拉时显示底下的新增按钮
visibleChange(visible, refName) {
if (visible) {
const ref = this.$refs[refName];
let product = ref.$refs.popper;
if (product.$el) product = product.$el;
if (
!Array.from(product.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>`;
product.appendChild(el);
// 新增按钮点击事件
el.onclick = () => {
this.addItem(null);
};
}
}
},
editItem(item) {
// 本地编辑
this.addItem(item.value);
},
deleteItem(item) {
this.$confirm("确定要删除" + "' " + item.label + " '" + "吗？", "删除", {
type: "warning",
})
.then(() => {
// 本地静态删除
this.options = this.options.filter((e) => e.value != item.value);
})
.catch(() => {});
},
// 添加产品
addItem(val) {
if (val && val != null) {
// 编辑修改
let index = this.options.findIndex((e) => e.value == val);
let obj = this.options[index];
this.$prompt(this.$t("请输入新的产品信息"), "编辑", {
confirmButtonText: this.$t("tagsView.ensure"),
cancelButtonText: this.$t("tagsView.cancel"),
inputValue: obj.label,
}).then(async ({ value }) => {
if (!value || value == "") {
this.$message({
type: "error",
message: "产品信息不能为空!",
});
} else {
let index = this.options.findIndex((e) => e.value == val);
this.options[index].label = value;
}
});
} else {
// 新增
this.$prompt(this.$t("请输入新的产品信息"), "提示", {
confirmButtonText: this.$t("tagsView.ensure"),
cancelButtonText: this.$t("tagsView.cancel"),
}).then(async ({ value }) => {
// 提交内容为空时提示
if (!value || value == "") {
this.$message({
type: "error",
message: "产品信息不能为空!",
});
} else {
// 本地静态新增，正常使用可以调接口新增
let obj = {
value: this.options[this.options.length - 1].value + 1,
label: value,
};
this.options.push(obj);
}
});
}
},
},
};
</script>
<style lang="scss" scoped>
.select {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
.form {
padding-top: 100px;
width: 500px;
}
}
</style>
新增：
1、在下拉框显示的时候，会触发生成新增按钮标签事件；
@visible-change="(v) => visibleChange(v, 'template')"
2、点击新增按钮会弹出可输入弹框 ,确定后会提交内容
// 新增
this.$prompt(this.$t("请输入新的产品信息"), "新增", {
confirmButtonText: this.$t("tagsView.ensure"),
cancelButtonText: this.$t("tagsView.cancel"),
}).then(async ({ value }) => {
// 提交内容为空时提示
if (!value || value == "") {
this.$message({
type: "error",
message: "产品信息不能为空!",
});
} else {
// 本地静态新增，正常使用可以调接口新增
let obj = {
value: this.options[this.options.length - 1].value + 1,
label: value,
};
this.options.push(obj);
}
});编辑：
1、编辑按钮和删除按钮都是写在下拉框内容里，设置了向右浮动
2、点击编辑时获取点击的那一列数据，然后修改
if (val && val != null) {
// 编辑修改
// 获取要修改的部分
let index = this.options.findIndex((e) => e.value == val);
let obj = this.options[index];
this.$prompt(this.$t("请输入新的产品信息"), "编辑", {
confirmButtonText: this.$t("tagsView.ensure"),
cancelButtonText: this.$t("tagsView.cancel"),
// 输入框里显示的内容
inputValue: obj.label,
}).then(async ({ value }) => {
if (!value || value == "") {
this.$message({
type: "error",
message: "产品信息不能为空!",
});
} else {
let index = this.options.findIndex((e) => e.value == val);
this.options[index].label = value;
}
});
} 删除：
至于删除就是获取到要操作的那一列数据，删除即可
查询：
查询就更简单了，直接在el-select标签中设置 filterable属性即可；如果想要更复杂的远程搜索效果，请移步element-ui官网