vue中el-tree右键菜单栏怎么实现，以及上方输入框的检索功能

html部分

        


        
        
        
          新建子组
          
          删除

          修改组名
          
        
      

js部分

data() {
    return {
      expandDefault: [], //默认选中第一项
      regionList: [],
      defaultPropsB: {
        children: "childrenEquipmentGroupModelList",
        label: "groupName",
      },
      optionCardX: "",
      optionCardY: "",
      optionCardShow: false,
      optionData: [],
      node: null,
      tree: null,
      level: null,
      patientId: null,
      del_groupName: "",
      filterText: "",
      groupName: "",
}

//监听(实现检索功能)
watch: {
    filterText(val) {
      this.$refs.groupTree.filter(val);
    },
  },
methods:{
// 查询列表
    filterNode(value, data) {
      if (!value) return true;
      return data.groupName.indexOf(value) !== -1;
    },
    rightClick(e, data, n, t) {
      this.optionCardShow = false;
      this.optionCardX = e.x; // 让右键菜单出现在鼠标右键的位置
      this.optionCardY = e.y;
      this.optionData = data;
      this.node = n; // 将当前节点保存
      this.tree = t;
      this.optionCardShow = true; // 展示右键菜单
      this.level = data.level;
      this.del_groupName = data.groupName;
    },
// 点击隐藏右键菜单（定义在最外层上的点击事件）
    OptionCardClose(event) {
      var currentCli = document.getElementById("option-button-group");
      if (currentCli) {
        if (!currentCli.contains(event.target)) {
          //点击到了id为option-button-group以外的区域，就隐藏菜单
          this.optionCardShow = false;
        }
      }
    },
}

css部分

 // 右键菜单按钮
  .option-card-button {
    width: 100%;
    margin-left: 0;
    font-size: 10px;
    border-radius: 0;
  }

罗列出主演实现思路，部分代码片段不完整，功能是完整的，