el-select给每一行的option添加删除按钮 并执行删除操作

el-select 给每一行的option增加删除按钮 并执行删除操作

<el-select
       v-model="condition"
       clearable
       class="w-260"
       placeholder="请选择保存的搜索条件"
       style="margin-left: 10px"
       @change="handleQuery()"
 >
            <el-option
              v-for="(item, key) in saveConditions"
              :key="key"
              :label="item.query_name"
              :value="String(item.id)"
            >
              <span>{{ item.query_name }}</span>
              <span @click.stop="del(item, $event)" class="btn">删除</span>
      </el-option>
</el-select>

    //删除
    del(item) {
      // console.log(111111111111111, item.id);
      let params = {
        id: [item.id],
        is_disable: "1",
      };

      this.$confirm(`此操作将删除该条数据, 是否继续?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          delQueryconditions(params).then((res) => {
            this.$message({ type: "success", message: "删除成功" });
            this.condition = "";
            this.getConditions();
            this.formData = {};
            this.formLabel = {
              orderType: "order_no",
              SKUType: "sku",
              logisticsType: "logistics_no",
              timeType: "order_time",
            };
            this.formData.platform_id = [];
            this.formData.site = [];
            this.formData.shop_id = [];
            this.getSixtime();
            setTimeout(() => {
              this.queryData(1);
            }, 200);
          });
        })
        .catch(() => {
          this.$message({ type: "info", message: "已取消" });
        });
    },

总结一下：其实也是挺好实现的，就是一开始的时候会不知道这个删除按钮应该怎么放置，如果删除的时候不掉接口的话，其实我们也可以做到删除操作，如果你接到这样的需求，希望可以帮助到你，嘻嘻