el-select + el-tree選擇（包含模糊查詢功能）

本文內容是我自己寫的簡單封裝，如需功能齊全的可以自己補充或者使用其它現有的組件庫：vue-treeselect

      <div class="menuSearch">
        <el-select
          class="el-select-menu"
          ref="selectTree"
          v-model="filterMenuText"
          placeholder="請輸入菜單名稱"
          filterable
          :filter-method="filterMenu"
          @clear="filterMenu"
          clearable
        >
          <el-option
            style="height: auto;background-color: white;min-width: 270px;font-weight: normal"
            :label="defaultOption.menuName"
            :value="defaultOption.path"
          >
            <el-tree
              ref="tree"
              v-if="showTree"
              :data="menu"
              :props="defaultProps"
              node-key="menuId"
              @node-click="nodeClick"
              :filter-node-method="filterNode"
            />
          </el-option>
        </el-select>
      </div>

 

      filterMenuText: '', // 查詢菜單
      showTree: true,
      defaultProps: {
        children: 'children',
        label: 'menuName'
      },
      defaultOption: { path: '', menuName: '' }

    nodeClick(item) {
      const { path, menuName } = item
      this.defaultOption.path = path
      this.defaultOption.menuName = menuName
      this.filterMenuText = menuName
      this.$refs.selectTree.blur()

      if (!item.children) {
        this.$router.push(path)
      }
    },
    filterMenu(val) {
      if (!val) {//清空時重置樹
        this.showTree = false
        this.$nextTick(() => {
          this.showTree = true
        })
      }
      this.$refs.tree.filter(val)
    },
    filterNode(value, data) {
      if (!value) return true
      return data.menuName.indexOf(value) !== -1
    }

// 修改el-select的icon  
/deep/.el-select-menu .el-input .el-input__suffix .el-input__suffix-inner {
    .el-icon-arrow-up:before{
      content: "\e778";
    }
    .el-select__caret{
      transform: rotateZ(0deg);
    }
  }