vue的element,el-select与el-tree配合使用,实现下拉树状
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | 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 > |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | data数据 options: [ { id: "1" , label: "测试" , children: [ { id: "2" , label: "测试一" , }, { id: "3" , label: "测试二" , }, { id: "4" , label: "测试三" , }, ], }, ], treeSelectText: "" , treeValue: {}, defaultProps: { children: "children" , label: "label" , }, |
1 2 3 4 5 6 7 8 | 树状节点点击事件 nodeClick(item) { const { id, label } = item; this .treeValue.id = id; this .treeValue.label = label; this .treeSelectText = label; this .$refs.stlectTree.blur(); }, |
效果
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」