vue 实现下拉框的数据是树状结构

页面显示效果

 

---

vue实现代码

   <el-form-item label="公司名称" prop="comName">
        <el-select ref="select" v-model="queryParams.comName" placeholder="请选择公司名称" clearable size="small"
          @change="handleSelectChange">
          <el-option :value="queryParams.comName" style="height: 1200px; overflow: auto">
            <el-tree :data="treeData" :props="defaultProps" :expand-on-click-node="false" @node-click="handleNodeClick"
              class="select-tree">
              <span class="custom-tree-node" slot-scope="{ node, data }">
                {{ data.label }}
              </span>
            </el-tree>
          </el-option>
        </el-select>
      </el-form-item>

js部分

<script>
import { listGateway, getGateway, delGateway, addGateway, updateGateway, exportGateway } from "@/api/gw/gateway";
import { treeselectCom } from "@/api/system/com";
export default {
  name: "Gateway",
  components: {
  },
  data() {
    return {
      // 树形选择器数据
      treeData: [],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
    };
  },
  created() {
    //1、获取数据
    this.getTreeselect();
  },
  methods: {
    /** 查询部门下拉树结构 */
    getTreeselect() {
      treeselectCom().then((response) => {
        this.treeData = response.data;
        console.log(this.treeData);
        // this.form.comName = this.treeData[0].label;
        // this.defaulComId = this.comOptions[0].id;
      });
    },
    handleNodeClick(data) {
      this.queryParams.comName = data.label;
      this.$refs.select.blur(); // 关闭下拉菜单
    },
    handleSelectChange(value) {
      console.log('Selected node:', value);
    }
    
  }
};
</script>
<style scoped>
.select-tree {
  padding: 5px;
}
</style>

---