页面显示效果

 

---

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>

---