ant -design vue a-tree 树形控件
话不多说,先上代码。
<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 树形控件的更多相关文章
- 文档驱动 —— 表单组件(五):基于Ant Design Vue 的表单控件的demo,再也不需要写代码了。
源码 https://github.com/naturefwvue/nf-vue3-ant 特点 只需要更改meta,既可以切换表单 可以统一修改样式,统一升级,以最小的代价,应对UI的升级.切换,应 ...
- vue+element tree(树形控件)组件(2)
今天记录组件的代码和一个调用它的父组件的代码,接口接收数据直接传element直接能用的,也就是经过上一章函数处理过的数据以下是代码 父组件 <template> <commonfi ...
- 不依任何赖第三方,单纯用vue实现Tree 树形控件
这几天接到一个需求,里面有需要做一个属性组件,找的第三方的,但是不能完全满足我的需求,有这时间,我就自己做个小轮子吧. 先看效果图(红点之前用的字体图标,是个对号,这里为了方便,用圆圈代替了选中状态, ...
- vue+element tree(树形控件)组件(1)
最近做了第一个组内可以使用的组件,虽然是最简版,也废了不少力.各位前辈帮我解决问题,才勉强搞定.让我来记录这个树形组件的编写过程和期间用到的知识点. 首先说说需求,就是点击出现弹窗+蒙板,弹窗内容是一 ...
- vue+element-ui之tree树形控件有关子节点和父节点之间的各种选中关系详解
做后端管理系统,永远是最蛋疼.最复杂也最欠揍的事情,也永远是前端开发人员最苦逼.最无奈也最尿性的时刻.蛋疼的是需求变幻无穷,如同二师兄的三十六般变化:复杂的是开发难度寸步难行,如同蜀道难,难于上青天: ...
- vue_elementUI_ tree树形控件 获取选中的父节点ID
el-tree 的 this.$refs.tree.getCheckedKeys() 只可以获取选中的id 无法获取选中的父节点ID想要获取选中父节点的id;需要如下操作1. 找到工程下的node_m ...
- ElementUI Tree树形控件renderContent return时报错
问题描述: 使用Tree树形控件使用render-content渲染时return后报错或npm run dev时候报错,报错信息相同,如下: 问题分析: renderContent函数中需要使用js ...
- Element ui tree树形控件获取当前节点id和父节点id
低版本Element ui tree树形控件获取当前节点id和父节点id的方法:点击查看 最新版本Element ui tree树形控件获取当前节点id和父节点id教程: 1.找到node_modul ...
- BootstrapBlazor实战 Tree树形控件使用(2)
继续上篇实战BootstrapBlazor树型控件Tree内容, 本篇主要讲解整合Freesql orm快速制作数据库后台维护页面 demo演示的是Sqlite驱动,FreeSql支持多种数据库,My ...
- BootstrapBlazor实战-Tree树形控件使用(1)
实战BootstrapBlazor树型控件Tree的使用, 以及整合Freesql orm快速制作数据库后台维护页面 demo演示的是Sqlite驱动,FreeSql支持多种数据库,MySql/Sql ...
随机推荐
- 利用shiro反序列化注入冰蝎内存马
利用shiro反序列化注入冰蝎内存马 文章首发先知社区:https://xz.aliyun.com/t/10696 一.shiro反序列化注入内存马 1)tomcat filter内存马 先来看一个普 ...
- Windows 11实现直播,VLC超简单实现捕获、串流、播放
上一篇文章说了搭建Nginx的rtmp服务.实现直播功能 期间发现一个更便捷的工具 VLC media play,官方下载:https://www.videolan.org 1.傻瓜式安装,略过 2. ...
- bootstrap可编辑下拉框jquery.editable-select
搜了半天发现在某处下载jquery.editable-select需要积分,于是整理出来方便 其他人. 先上下载链接: http://pan.baidu.com/s/1kUXvwlL pas ...
- 编写Java程序,模拟网上商城购物,当用户选好物品提交订单时,每笔订单会自动生成一个唯一的订单编号。
查看本章节 查看作业目录 需求说明: 模拟网上商城购物,当用户选好物品提交订单时,每笔订单会自动生成一个唯一的订单编号.而部分电子商务网站在数据高峰期时,一毫秒可能需要处理近千笔的订单 现在简单模拟 ...
- Hadoop Jobhistory配置启用
Hadoop Jobhistory记录下已运行完的MapReduce作业信息并存放在指定的HDFS目录下, 默认情况下是没有启动的,需要配置完后手工启动服务. 1.修改hadoop的配置文件mapre ...
- python 日志logging设置按天进行保存,保存近7天,过期日志自动清理
参考文章(写的很详细):https://www.cnblogs.com/xujunkai/p/12364619.html 前言: 跑接口自动化或者其他程序运行时,如果只能保存一份log文件,可能会存在 ...
- SQL怎么求多列的和?
日常比较常使用的SQL,查询各科的总分,并求出总分大于240的学生名字和总分,如图,要求出linux.Mysql.Java三科的总分,并查处总分大于240的学生姓名和总分 可能你会想到sum,但是su ...
- Nginx_配置文件nginx.conf配置详解
user nginx nginx ; # Nginx用户及组:用户 组.window下不指定 worker_processes 8; # 工作进程:数目.根据硬件调整,通常等于CPU数量或者2倍于CP ...
- Java数据类型 long 与 Long 的区别 和 正确用法
1.区别 (1) long 是 基本类型 [类似于 int] Long 是 对象类型 [类似于Integer] (2) long 默认值是 0 Long 默认值是 null 2.比较方法 (1) ...
- java list 类型删除其中的某些元素的正确方法
List<Object> list= new ArrayList<>();//记录需要删除的元素List<Object> li = new ArrayList< ...