话不多说,先上代码。

<a-tree
v-if="this.treeData && this.treeData.length > 0"
ref="tree"
:treeData="treeData"
:defaultExpandedKeys="expandedKeys"
:defaultSelectedKeys="expandedKeys"
@select="treeSelect"
:title="title"
>
<a-icon slot="switcherIcon" type="down" />
</a-tree> 
<script>
import {getTreeDate, queryTreeDate,DelDate} from "@api/api"
data() { return { treeData: [], }; },
created() {
this.printList(this.$route.query.spaceid);
this.queryBody(this.$route.query.contentid);
},
treeSelect(selectedKeys,e) {
//获取面包屑
this.breadList = [];
// console.log("这是啥",e.node.parent);
this.title = e.node._props.title
// this.contentid = e.node.eventKey;
console.log("这个是key:",e.node.eventKey)
console.log("这个是key:",e.node.pos)
this.queryBody(e.node.eventKey);
},
queryBody(id){
if (id!=null){
this.$router.push({path:'/knowledge/AllUpdates/Details?contentid='+id+'&spaceid='+this.$route.query.spaceid});
queryTreeDate({"contentid":id}).then((res) => {
if (res.success) {
this.title = res.result.title;
this.content = res.result.body;
this.name = res.result.lastName;
this.lastDate = res.result.lastmoddate;
}
})
}
},
printList(params,params1){
console.log(params1)
getTreeDate({"spaceid":params}).then((res) => {
if (res.success) {
this.treeData = res.result;
console.log(params,params1)
this.expandedKeys=[this.$route.query.contentid];
console.log(this.expandedKeys);

}
});
},
  }
};
</script>

ant -design vue a-tree 树形控件的更多相关文章

  1. 文档驱动 —— 表单组件(五):基于Ant Design Vue 的表单控件的demo,再也不需要写代码了。

    源码 https://github.com/naturefwvue/nf-vue3-ant 特点 只需要更改meta,既可以切换表单 可以统一修改样式,统一升级,以最小的代价,应对UI的升级.切换,应 ...

  2. vue+element tree(树形控件)组件(2)

    今天记录组件的代码和一个调用它的父组件的代码,接口接收数据直接传element直接能用的,也就是经过上一章函数处理过的数据以下是代码 父组件 <template> <commonfi ...

  3. 不依任何赖第三方,单纯用vue实现Tree 树形控件

    这几天接到一个需求,里面有需要做一个属性组件,找的第三方的,但是不能完全满足我的需求,有这时间,我就自己做个小轮子吧. 先看效果图(红点之前用的字体图标,是个对号,这里为了方便,用圆圈代替了选中状态, ...

  4. vue+element tree(树形控件)组件(1)

    最近做了第一个组内可以使用的组件,虽然是最简版,也废了不少力.各位前辈帮我解决问题,才勉强搞定.让我来记录这个树形组件的编写过程和期间用到的知识点. 首先说说需求,就是点击出现弹窗+蒙板,弹窗内容是一 ...

  5. vue+element-ui之tree树形控件有关子节点和父节点之间的各种选中关系详解

    做后端管理系统,永远是最蛋疼.最复杂也最欠揍的事情,也永远是前端开发人员最苦逼.最无奈也最尿性的时刻.蛋疼的是需求变幻无穷,如同二师兄的三十六般变化:复杂的是开发难度寸步难行,如同蜀道难,难于上青天: ...

  6. vue_elementUI_ tree树形控件 获取选中的父节点ID

    el-tree 的 this.$refs.tree.getCheckedKeys() 只可以获取选中的id 无法获取选中的父节点ID想要获取选中父节点的id;需要如下操作1. 找到工程下的node_m ...

  7. ElementUI Tree树形控件renderContent return时报错

    问题描述: 使用Tree树形控件使用render-content渲染时return后报错或npm run dev时候报错,报错信息相同,如下: 问题分析: renderContent函数中需要使用js ...

  8. Element ui tree树形控件获取当前节点id和父节点id

    低版本Element ui tree树形控件获取当前节点id和父节点id的方法:点击查看 最新版本Element ui tree树形控件获取当前节点id和父节点id教程: 1.找到node_modul ...

  9. BootstrapBlazor实战 Tree树形控件使用(2)

    继续上篇实战BootstrapBlazor树型控件Tree内容, 本篇主要讲解整合Freesql orm快速制作数据库后台维护页面 demo演示的是Sqlite驱动,FreeSql支持多种数据库,My ...

  10. BootstrapBlazor实战-Tree树形控件使用(1)

    实战BootstrapBlazor树型控件Tree的使用, 以及整合Freesql orm快速制作数据库后台维护页面 demo演示的是Sqlite驱动,FreeSql支持多种数据库,MySql/Sql ...

随机推荐

  1. 痞子衡嵌入式:把玩i.MXRT1062 TencentOS Tiny EVB_AIoT开发板(1) - 开发环境搭建与点灯

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是i.MXRT1062 TencentOS Tiny EVB_AIoT开发板环境搭建与点灯. 腾讯 TencentOS 团队于2021年1 ...

  2. 第一篇CSDN博客,大家好!

    大家好,我是负雪明烛! 我这昵称的来源是喜欢一句很有意蕴的古诗--苍山负雪,明烛天南. 我喜欢这句诗,很多的账号都用了这个"负雪明烛"的昵称,如果大家在其他地方看到叫这个名字的人, ...

  3. 1131 - Just Two Functions

    1131 - Just Two Functions    PDF (English) Statistics Forum Time Limit: 2 second(s) Memory Limit: 32 ...

  4. Python 英语单词本

    python pymysql re requests socket库的简单运用 要考试了,这里用所学的知识做一个实例 pymysql库 这个库是用来连接数据库的,使用数据库语句在python里创建表和 ...

  5. github项目托管方式(看项目自身是否自带有 .git)

    一.本地仓库和远程仓库建立联系 方式一:项目自身带有 .git文件的[自身就是一个本地仓库的](这里咱以vue-cli3项目为例) 1.创建自带.git本地仓库:创建一个叫 my-vue 的项目 2. ...

  6. Service有多个实现类,它怎么知道该注入哪个ServiceImpl类

    方法一:Controller中注入service的时候使用@Autowired自动注入,@Qualifier("beanId")来指定注入哪一个. 方法二:Controller中注 ...

  7. 【算法】main函数的堆栈溢出

    main函数的堆栈的大小默认为1mb 如果把数组int x[1000][1000]定义在main函数里 则int为4byte,8bit为1byte,1024byte为1kb,1024kb为1mb 4* ...

  8. ImageNet2017文件下载

    ImageNet2017文件下载 文件说明 imagenet_object_localization.tar.gz包含训练集和验证集的图像数据和地面实况,以及测试集的图像数据. 图像注释以PASCAL ...

  9. <数据结构>XDOJ314.完全二叉树的子树

    问题与解答 问题描述 对一棵完全二叉树,采用自上而下.自左往右的方式从1开始编号,我们已知这个二叉树的最后一个结点是n,现在的问题是结点m所在的子树一共包括多少个结点? 输入格式 输入数据包括多行,每 ...

  10. [Azure DevOps] 管理测试计划、测试套件和测试用例

    我喜欢测试计划,它能让团队清楚测试进度,还能妥善分配测试人员,更重要的是它能保证测试质量和效率.Azure DevOps 里提供了 Test Plans 这个模块用于管理测试计划. 1. Azure ...