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

html部分

<div>
        <el-input v-model="filterText" placeholder="组检索"></el-input>
</div>
<div @contextmenu.prevent.capture>
        <el-tree
          :data="regionList"
          :props="defaultPropsB"
          accordion
          @node-click="handleNodeClick"
          @node-contextmenu="rightClick"
          highlight-current
          node-key="id"
          :default-expanded-keys="expandDefault"
          :filter-node-method="filterNode"
          ref="groupTree"
        >
        </el-tree>
        <div
          :style="{
            'z-index': 9999,//防止被覆盖
            position: 'fixed',
            left: optionCardX + 'px',
            top: optionCardY + 'px',
            width: 100 + 'px',
            background: 'white',
          }"
          v-show="optionCardShow"
          id="option-button-group"
        >
          <el-button
            class="option-card-button"
            v-show="level != 4"
            @click="newBuild"
            >新建子组
          </el-button>
          <el-button class="option-card-button" @click="deleteList"
            >删除</el-button
          >

          <el-button class="option-card-button" @click="changeName"
            >修改组名
          </el-button>
        </div>
      </div>

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;
  }

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