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

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

Html代码

  






  
删除

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代码

效果：