开源框架.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 ...
随机推荐
- [luogu3648][bzoj3675][APIO2014]序列分割【动态规划+斜率优化】
题目大意 让你把一个数列分成k+1个部分,使分成乘积分成各个段乘积和最大. 分析 首先肯定是无法开下n \(\times\) n的数组,那么来一个小技巧:因为我们知道k的状态肯定是从k-1的状态转移过 ...
- 【mysql】工作中mysql常用命令及语句
1.查看mysql版本号 MySQL [release_test_oa]> select version(); +------------+ | version() | +----------- ...
- php 限制类的对象类型
事实上,采用哪种处理参数类型的策略,取决于任何潜在bug的严重程度.通常PHP会根据语境自动转换大多数基本数据类型. 因此,你需要在检测类型.转换类型和依赖良好清晰的文档(无论决定用哪一种,都应该提供 ...
- 从Java的角度简单修复Cookie越权漏洞
技术实在是有限,讲解cookie越权的时候可能有点简单和粗糙.这里就简单记录学习下. 首先自己写一段存在漏洞的代码code: sendCookie.java package cookie; impor ...
- 纪中2018暑假培训day7提高b组改题记录
由于今天太颓了,所以没有解释 t1: Description 码零鼠是一只很喜欢mx数学的神犇,上面那个不是ta本人的样子.这天,ta在研究一个神奇的数列,这个数列是这样的:a0 = 1an = ai ...
- 神经网络中w,b参数的作用（为何需要偏置b的解释）
http://blog.csdn.net/xwd18280820053/article/details/70681750 可视图讲解神经元w,b参数的作用 在我们接触神经网络过程中,很容易看到就是这样 ...
- request的基本应用
一.安装 pip install requests (mac前面加sudo) 二.requests的一些参数 method:一般是用的那种请求方法,是get还是post,delete或者delete ...
- maven+testng+eclipse
1.安装maven 2.安装testng 3.配置maven的dependency,和build <project xmlns="http://maven.apache.org/POM ...
- POJ 2528 Mayor's posters (线段树+离散化）
Mayor's posters Time Limit: 1000MS Memory Limit: 65536K Total Submissions:75394 Accepted: 21747 ...
- Jenkins Pipelines Summary
示例1: pipeline{ agent {label "xxx"} // label is a special machine registered in Jenkins env ...