Vue--组件Ant- 树形结构菜单
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 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 | <template> <!-- checkable-节点前添加复选框 --> <a-tree defaultExpandAll :autoExpandParent= "true" :treeData= "treeData" @select= "this.onSelect" /> </template> data () { return { // expandedKeys: ['0-0-0', '0-0-1'], // 受控展开指定的树节点 autoExpandParent: true , // 是否自动展开父节点 // checkedKeys: ['0-0-0'], // 受控选中的树节点 // selectedKeys: [], //(受控)设置选中的树节点 treeData: [{ title: '队员:' , key: '0-0' , children: [] }], getPeopleTree( this .queryParam) .then(res => { if (res.code && res.code !== 200) { this .$message.error(res.message) } if (res.data !== null ) { this .peopleTreeData = res.data[0].course_list // 训练数据 this .treeData[0].title = res.data[0].member // 训练人名字 for ( var i = 0; i < res.data[0].course_list.length; i++) { var dict = { title: '' , key: '' } dict.title = res.data[0].course_list[i].course_name + '-' + res.data[0].course_list[i].course_times dict.key = res.data[0].course_list[i].course_id this .treeData[0].children.push(dict) } // console.log('最后的数据' + JSON.stringify(this.treeData)) // 训练课程id // console.log('训练课程id' + res.data[0].course_list[0].course_id) } else { this .peopleTreeData = [] this .treeData[0].title = '暂无记录' } this .loading = false }) . catch ((error) => { console.log(error) if (error.message === 'timeout of 6000ms exceeded' ) { this .$message.error( '网络超时' ) } this .loading = false }) }) }, onSelect (selectedKeys, info) { // console.log('点击的人的信息' + JSON.stringify(selectedKeys[0])) this .xunlian = selectedKeys[0] const getparam = { course_id: selectedKeys[0], user_id: this .queryParam.user_id } |
分类:
Vue学习
, javascript
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗?
· 【译】Visual Studio 中新的强大生产力特性
· 【设计模式】告别冗长if-else语句:使用策略模式优化代码结构
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义