下拉装 -- 数状结构

原创：vue实现表单下拉框和树形结构组合  出现2个滚动条问题

<!--HTML -->     
 <el-form-item label="档案类型" prop="recordsType">
        <el-tree
          ref="tree"
          :data="deptOptions"
          :props="defaultProps"
          :expand-on-click-node="false"
          :filter-node-method="filterNode"
          node-key="id"
          :default-expand-all="false"
          highlight-current
          @node-click="handleNodeClick"
        />
      </el-form-item>
      <!-- <el-form-item>
        <el-select v-model="builder">
          <el-option :value="builder" style="height: 100%;">
            <el-tree
              ref="tree"
              :data="deptOptions"
              :props="defaultProps"
              :expand-on-click-node="false"
              :filter-node-method="filterNode"
              node-key="id"
              default-expand-all
              highlight-current
              @node-click="handleNodeClick"
            />
          </el-option>
        </el-select>
      </el-form-item> -->
//js
export default {
  data() {
    return {
      builder: "",
      dataRule: {
        recordsType: [
          { required: true, message: "档案类型不能为空", trigger: "blur" }
        ],
        diaojuanComment: [
          { required: false, message: "前缀不能为空", trigger: "blur" }
        ]
      },
      deptOptions: [],
      defaultProps: {
        children: "list",
        label: "archivesName"
      }
    };
  },
  mounted() {
    this.Typetree();
  },
  methods: {
    //档案类型列表
    Typetree() {
      this.$http({
        url: this.$http.adornUrl("/baidu/url"),
        method: "get"
      }).then(({ data }) => {
        if (data.code == 0) {
          this.deptOptions = data.list;
        }
      });
    },
     filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    //点击树节点调用
    handleNodeClick(data) {
      this.builder = data.archivesName;
    },
  }
};