开源框架.netCore DncZeus学习(五)下拉树的实现
千里之行,始于足下,先从一个小功能研究起,在菜单管理页面有一个下拉树,先研究下它怎么实现的
1、先找到menu.vue页面
惯性思维先搜索请选择三个字,原来是动态生成的
再向上找DropDown组件,找到了,之前打开时有点重叠,增加margin-left:20px。
不太熟悉slot,:transefer什么意思,之前没用过iView,去查IView资料
trigger代表点击触发,:transfer应该是代表弹出时显示到body内,不然的话可能会导致显示不全。placement显示的位置,修改该位置,可以看到下拉菜单会随着变化。
2、slot:prepend有两个属性prepend是在左边 append是在右边,因为这部分代码是几个input组件放到一个大的input组件中,所以要设置prepend.
如上图,最外层整个是一个input.正常、全部、请选择设为prepend代表在输入框左边。如果设为append效果如下
prepend:预先,append:附加
3、下边研究click事件点击后如何弹出树
通过查看iview文档,可以看出除了custom,其他都是自动弹出的
4、然后是刷新菜单
该菜单对应的方法很明显
查找所有相关代码
显示树
mounted里自动加载MenuTree
menu.js里有对应的读取数据方法,带export的可以在组件里import
API中返回的数据如下
查看iView的tree节点定义如下,两者一致,说明数据流程确实从这走的。
综上就是下拉树的实现方法
上一篇、开源框架.netCore DncZeus学习(四)项目升级
开源框架.netCore DncZeus学习(五)下拉树的实现的更多相关文章
- 开源框架.netCore DncZeus学习(四)项目升级
今天发现开源代码从1.0.0.1升级到了1.0.1.0,主要去掉了id主键,升级办法打开DncZeus,右键Git Bash Here,输入以下命令 合并失败,因为上一节尝试修改了几个代码,解决办法 ...
- 开源框架.netCore DncZeus学习(三)增加一个菜单
框架运行起来了,先尝试增加一个菜单. 本节增加一个菜单名字:公司管理,需要注意一点,所有的name都要保持一致,注意圈中部分.为了防止手敲代码出错,建议复制已有的代代码进行修改(比如这里用的Role页 ...
- 开源框架.netCore DncZeus学习(二)配置连接
配置连接字符串,update-database,初始数据后,访问报错,提示offset错误.因为本机上使用的sql2008. .net Core 2.X中的EF访问sqlserver2008默认使用的 ...
- 开源框架.netCore DncZeus学习(一)npm安装
今天看到一个不错的开源项目DncZeus, https://github.com/lampo1024/DncZeus 整个界面挺漂亮,而且权限做到了按钮级别,功能也较容易扩展,刚好学习VUE纯看文章很 ...
- zTree开发下拉树
最近,因为工作需要一个树形下拉框的组件,经过查资料一般有两种的实现方法.其一,就是使用zTree实现:其二,就是使用easyUI实现.因为公司的前端不是使用easyUI设计的,故这里我选择了zTree ...
- vue 模拟下拉树
// 使用vue 做表格部分其他部分暂不修改 var app = new Vue({ el: "#freightTbl", watch: { //监听表格数据的变化[使用 watc ...
- vue-Treeselect实现组织机构(员工)下拉树的功能
知识点:前端使用vuetree的组件库,调用后台查询组织机构,包括人员的接口 实现下拉树的功能 查考: vue-treeselect官网:https://vue-treeselect.js.org/ ...
- Extjs下拉树代码测试总结
http://blog.csdn.net/kunoy/article/details/8067801 首先主要代码源自网络,对那些无私的奉献者表示感谢! 笔者对这些代码做了二次修改,并总结如下: Ex ...
- EXTJS下拉树ComboBoxTree参数提交及回显方法
http://blog.csdn.net/wjlht/article/details/6085245 使用extjs可以构造出下拉数,但是不方便向form提交参数,在此,笔者想到一个办法,很方便Com ...
随机推荐
- Android里透明的ListView
发现了一个list滚动时,某item背景透明的问题.网上搜索一下,发现有很多人在问list背景黑色的问题,交流中给出的解决方案基本上很统一. 先是解释问题产生的原因是Android对list的滚动做了 ...
- 【BZOJ5335】[TJOI2018]智力竞赛(二分图匹配)
[BZOJ5335][TJOI2018]智力竞赛(二分图匹配) 题面 BZOJ 洛谷 题解 假装图不是一个DAG想了半天,.发现并不会做. 于是假装图是一个DAG. 那么显然就是二分答案,然后求一个最 ...
- jmeter生成测试报告
- prufer序列学习笔记
prufer序列是一个定义在无根树上的东西. 构造方法是:每次选一个编号最小的叶子结点,把他的父亲的编号加入到序列的最后.然后删掉这个叶节点.直到最后只剩下两个节点,此时得到的序列就是prufer序列 ...
- 如何在疲劳的JS世界中持续学习
作者简介 cnfi 蚂蚁金服·数据体验技术团队 本文翻译自<Stay updated in JS fatigue universe>,并对内容有所补充和修改. 部分内容参考<HOW ...
- Unable to load script from assets 'index.android.bundle'.make sure you bundle is packaged correctly
解决此问题 以下方法每次都需要执行命令2才能更新 1.创建assets目录 mkdir android/app/src/main/assets 2.执行命令 react-native bundle - ...
- Tomcat如何发布web项目
tomcat/webapps目录是用来存放Java项目的.每一个文件夹都是一个项目,默认这个目录下已经有了四个项目,都是tomcat自带的. 其中ROOT就是我们测试Tomcat时访问的Tomcat的 ...
- 苹果电脑自带python安装tensorflow一直有问题
对于有些程序是不支持python3而支持python2的,为了在苹果电脑安装tensorflow, 首先sudo su到管理员权限 export TF_BINARY_URL=https://stora ...
- Python 的内置函数
函数 功能 示例 示例结果 abs(x) 返回x的绝对值 abs(-2) 2 chr(x) 返回整数x所代表的字符 chr(65) A divmod(x,y) 返回x除以y的商和余数的元组 divmo ...
- Vue(基础五)_vue中用ref和给dom添加事件的特殊情况
一.前言 这篇文章涉及的主要内容有: 1.ref绑定在标签上是获取DOM对象 2.ref绑定在子组件上获取的是子组件对象 3.案列:自动获取input焦点 二.主要内容 1.基础内容: ref 被用来 ...