💎一站式轻松地调用各大LLM模型接口,支持GPT4、智谱、星火、月之暗面及文生图 广告
element ui树形控件使用 ``` <el-scrollbar wrap-style="overflow-x:hidden;" :style="{ height: scrollerHeight }" > <el-tree v-if="loadingTree" node-key="id" :default-checked-keys="[14]" // 默认展开项 :props="defaultProps" //数据 :load="loadNode" lazy //懒加载 style="background-color: #fff" @node-click="handleNodeClick" //点击事件 > //添加图标及样式 <span slot-scope="{ node }"> <i v-if="node.level === 1" style="color: #409eff" class="el-icon-office-building" /> <i v-else style="color: #409eff" class="el-icon-notebook-2" /> <span style="padding-left: 5px">{{ node.label }}</span> </span> </el-tree> </el-scrollbar> //动态计算高度 computed: { // 滚动区高度 scrollerHeight: function() { return window.innerHeight - 130 + "px"; } }, //加载树形 // 获取一级目录 /* 树形接口方法*/ getNextOrgInfo(id) { return nextOrgInfo(id); }, async loadNode(node, resolve) { this.listInfo = []; //加载第一级 if (node.level === 0) { const res = await this.getNextOrgInfo(-1); //传固定值,查询所有 return resolve(res); } else if (node.level > 0) { //每次点击,获取当前数据,传当前的id,动态加载子级 const resChild = await this.getNextOrgInfo(node.data.id); resolve(resChild); } }, // 树形结构点击方法 handleNodeClick(data) { console.log(data) }, ```