vue实现表单下拉框和树形结构组合

1.饿了么一般下拉框+一般树形结构

 2.代码组合

//template部分
<el-form inline>
       <el-form-item>
              <el-select v-model="builder">
                <el-option
                  :value="builder"
                  style="height: 1200px; overflow: auto"
                >
                  <el-tree
                    :data="deptOptions"
                    :props="defaultProps"
                    :expand-on-click-node="false"
                    :filter-node-method="filterNode"
                    ref="tree"
                    node-key="id"
                    default-expand-all
                    highlight-current
                    @node-click="handleNodeClick"
                  >
                    <span class="span-ellipsis" slot-scope="{ node, data }">
                      <span
                        :class="['span-child']"
                        style="display: flex; align-items: center"
                        :title="node.label"
                      >
                        <img
                          v-if="data.deviceType == '41010000'"
                          src="./DataQuery/PowerDataQuery/images/ch_1_2.png"
                        />
                        <img
                          v-if="data.deviceType == '41020000'"
                          src="./DataQuery/PowerDataQuery/images/ch_1_2_online.png"
                        />
                        <span style="font-size: 14px">{{ node.label }}</span>
                      </span>
                    </span>
                  </el-tree>
                </el-option>
              </el-select>
            </el-form-item>
 </el-form>

//script部分

import { treeselect } from "@/api/buildingData";
export default {
  name: "Index",
  data() {
    return {
      deptOptions: [],
      // 版本号
      defaultProps: {
        children: "children",
        label: "label",
      },
    };
  },
  created() {
    this.getList();
  },
  methods: {
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    //点击树节点调用
    handleNodeClick(data) {
      
    },
    //初始化树节点
    getList() {
      treeselect({}).then((res) => {
        this.deptOptions = res.data;
      });
    },
  },
};

3.存在问题

初始得给option一个高度，并且得给它y轴滚动，不然如果树形结构过长，会被隐藏，如下图

但是给了高度，设置了滚动效果，这时会出现两个滚动条 ，如下图

很费解，望各位码友们帮忙解惑。