頁面顯示效果

?

---

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>

---