vue的element，el-select与el-tree配合使用，实现下拉树状

HTML
<el-select
      ref="stlectTree"
      v-model="treeSelectText"
      placeholder="请选择"
      size="small"
    >
      <el-option
        :value="treeValue.id"
        :label="treeValue.label"
        style="height: auto; padding: 0"
      >
        <el-tree
          class="ctims-treebox"
          style="font-weight: 400"
          :data="options"
          :props="defaultProps"
          default-expand-all
          node-key="codeId"
          :expand-on-click-node="false"
          highlight-current
          @node-click="nodeClick"
          ref="tree"
        />
      </el-option>
    </el-select>

　　

data数据
options: [
        {
          id: "1",
          label: "测试",
          children: [
            {
              id: "2",
              label: "测试一",
            },
            {
              id: "3",
              label: "测试二",
            },
            {
              id: "4",
              label: "测试三",
            },
          ],
        },
      ],
      treeSelectText: "",
      treeValue: {},
      defaultProps: {
        children: "children",
        label: "label",
      },

　　

树状节点点击事件
 nodeClick(item) {
      const { id, label } = item;
      this.treeValue.id = id;
      this.treeValue.label = label;
      this.treeSelectText = label;
      this.$refs.stlectTree.blur();
    },

　　效果