vue elementUI 自定义框组织树，选择select下拉组织树横行滑动条出现方法

在Vue中使用Element UI时，如果你想要创建一个自定义的框架树，并且在选择Select下拉组织树时出现横向滑动条，你可以通过以下步骤实现：

1. 使用el-tree组件创建组织树。
2. 使用el-select组件封装树结构，并通过el-scrollbar组件确保横向滑动。

以下是一个简单的示例代码：

<template>
  <el-select v-model="selectedValue" popper-class="custom-tree-select">
    <el-option :value="selectedValue">
      <el-tree
        :data="treeData"
        :props="defaultProps"
        node-key="id"
        ref="tree"
        :highlight-current="true"
        :expand-on-click-node="false"
      >
        <span class="custom-tree-node" slot-scope="{ node, data }">
          <span>{{ node.label }}</span>
        </span>
      </el-tree>
    </el-option>
  </el-select>
</template>
 
<script>
export default {
  data() {
    return {
      selectedValue: null,
      treeData: [
        // 填充你的组织树数据
      ],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    };
  },
  watch: {
    selectedValue(newValue) {
      this.$refs.tree.setCurrentKey(newValue);
    }
  }
};
</script>
 
<style>
.custom-tree-select .el-scrollbar {
  overflow-x: auto;
}
 
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
</style>

在这个示例中，el-select组件被用来创建下拉选择框。el-option是下拉选项，而el-tree则用来展示组织树。通过自定义popper-class，你可以给下拉菜单添加一个自定义的CSS类，在这个例子中是custom-tree-select。在CSS中，我们设置了.el-scrollbar的overflow-x属性为auto，这样当树的宽度超出下拉框的宽度时，会出现横向滑动条。