Vue实现Element UI框架的自定义输入框或下拉框在输入时对列表选项进行过滤，以及右键列表选项弹出菜单进行删除

        需求就是Element UI的输入框或下拉框在输入时过滤列表，还要支持右键删除列表的某一项，记录一下。

Html代码

<el-autocomplete
  size="mini"
  style="width:250px"
  v-model="product"
  clearable
  placeholder="请输入商品"
  :fetch-suggestions="filterProducts"
  @select="handleSelectProduct"
  @clear="handleRemoveProduct">
  <template slot-scope="{ item }">
    <h1 @contextmenu.prevent="openProductMenu($event)">{{item.name}}</h1>
  </template>
</el-autocomplete>

<!-- <el-select
  v-model="product"
  placeholder="请输入商品"
  filterable
  style="width:250px">
  <el-option
    v-for="item in productList"
    :key="item.name"
    :label="item.name"
    :title="item.name"
    :value="item.name" 
    style="width:250px;position:relative"
    @contextmenu.prevent.native="openProductMenu($event)">
  </el-option>
</el-select> -->

<!-- 商品右键菜单 -->
<ul
  v-show="productMenuVisible"
  :style="{left: productMenuLeft + 0 + 'px', top: productMenuTop - 10 + 'px'}"
  class="productline-menu">
  <li @click="handleDeleteProduct" style="padding: 0;"><el-button icon="el-icon-error" style="height: 30px;border: unset; width: 100px; display: block;padding: 0 10px; margin: 0;">删除</el-button></li>
</ul>

JS代码

data: () => ({
  // 产品
  product: ""

  // 右键菜单是否可见
  productMenuVisible: false,

  // 右键菜单左位移
  productMenuLeft: 0,

  // 右键菜单上位移
  productMenuTop: 0,

  // 右键选中的产品
  productObj: ""

  // 产品列表
  productList: [
    {
      "id": 1,
      "name": "金"
    },
    {
      "id": 2,
      "name": "木"
    },
    {
      "id": 3,
      "name": "水"
    },
    {
      "id": 4,
      "name": "火"
    },
    {
      "id": 5,
      "name": "土"
    }
  ]
}),

watch: {
  /**
    * 监听点击右键菜单区域
    */
  productMenuVisible(value) {
    if (value) {
      document.body.addEventListener('click', this.closeProductMenu);
    } else {
      document.body.removeEventListener('click', this.closeProductMenu);
    }
  }
},

methods: {
  /**
   * 打开商品右键菜单
   */
  openProductMenu(e) {
    const menuMinWidth = 105
    const offsetLeft = this.$el.getBoundingClientRect().left
    const offsetWidth = this.$el.offsetWidth
    const maxLeft = offsetWidth - menuMinWidth
    const left = e.clientX - offsetLeft
    if (left > maxLeft) {
      this.productMenuLeft = maxLeft
    } else {
      this.productMenuLeft = left
    }
    this.productMenuTop = e.clientY
    this.productMenuVisible = true
    this.productObj = e.currentTarget.innerHTML
  },

  /**
   * 关闭商品右键菜单
   */
  closeProductMenu() {
    this.productMenuVisible = false;
  },

  /**
   * 右键点击删除商品
   */
  handleDeleteProduct() {
    this.$confirm("此操作将删除【" + this.productObj + "】商品, 是否继续?", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    })
    .then(() => {
      console.log("You are deleting the product of ", "'" + this.productObj + "'");
      // this.deleteProductByName(this.productObj);
    })
    .catch(() => {
      // ...
    });
  },

  /**
   * 根据查询字符串过滤商品
   */
  filterProducts(queryString, cb) {
    console.log("this.productList =>", this.productList)
    var restaurants = this.productList;
    var results = queryString
      ? restaurants.filter(this.createFilter(queryString))
      : restaurants;
    cb(results);
  },

  /**
   * 根据查询字符串过滤商品规则
   */
  createFilter(queryString) {
    return (restaurant) => {
      return (
        (restaurant.name.indexOf(queryString) != -1) || (restaurant.name.indexOf(queryString) != -1)
      );
    };
  },

  /**
   * 左键点击商品选项
   */
  handleSelectProduct(item) {
    this.form.product = item.name;
  },

  /**
   * 清空输入框
   */
  handleRemoveProduct() {
    this.form.product = '';
  }
}

Css代码

<style lang="less">
.productline-menu {
  position: absolute;
  margin: 0;
  background: #fff;
  z-index: 9999;
  list-style-type: none;
  padding: 5px 0;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 400;
  color: #333;
  box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);

  li {
    margin: 0;
    padding: 7px 16px;
    cursor: pointer;

    &:hover {
      background-color: #eee;
    }
  }
}
</style>

效果：