在el-select下拉框内实现增删改查

废话不多说，直接上效果和代码

 效果：在下拉框内就可以实现增删改查效果，不需要另外建立表格；

完整代码如下：

<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官网

https://element.eleme.cn/#/zh-CN/component/select