千里之行，始于足下，先从一个小功能研究起，在菜单管理页面有一个下拉树，先研究下它怎么实现的

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学习（五）下拉树的实现的更多相关文章

  1. 开源框架.netCore DncZeus学习（四）项目升级

    今天发现开源代码从1.0.0.1升级到了1.0.1.0,主要去掉了id主键,升级办法打开DncZeus,右键Git Bash Here,输入以下命令 合并失败,因为上一节尝试修改了几个代码,解决办法 ...

  2. 开源框架.netCore DncZeus学习（三）增加一个菜单

    框架运行起来了,先尝试增加一个菜单. 本节增加一个菜单名字:公司管理,需要注意一点,所有的name都要保持一致,注意圈中部分.为了防止手敲代码出错,建议复制已有的代代码进行修改(比如这里用的Role页 ...

  3. 开源框架.netCore DncZeus学习（二）配置连接

    配置连接字符串,update-database,初始数据后,访问报错,提示offset错误.因为本机上使用的sql2008. .net Core 2.X中的EF访问sqlserver2008默认使用的 ...

  4. 开源框架.netCore DncZeus学习（一）npm安装

    今天看到一个不错的开源项目DncZeus, https://github.com/lampo1024/DncZeus 整个界面挺漂亮,而且权限做到了按钮级别,功能也较容易扩展,刚好学习VUE纯看文章很 ...

  5. zTree开发下拉树

    最近,因为工作需要一个树形下拉框的组件,经过查资料一般有两种的实现方法.其一,就是使用zTree实现:其二,就是使用easyUI实现.因为公司的前端不是使用easyUI设计的,故这里我选择了zTree ...

  6. vue 模拟下拉树

    // 使用vue 做表格部分其他部分暂不修改 var app = new Vue({ el: "#freightTbl", watch: { //监听表格数据的变化[使用 watc ...

  7. vue-Treeselect实现组织机构（员工）下拉树的功能

    知识点:前端使用vuetree的组件库,调用后台查询组织机构,包括人员的接口 实现下拉树的功能 查考: vue-treeselect官网:https://vue-treeselect.js.org/ ...

  8. Extjs下拉树代码测试总结

    http://blog.csdn.net/kunoy/article/details/8067801 首先主要代码源自网络,对那些无私的奉献者表示感谢! 笔者对这些代码做了二次修改,并总结如下: Ex ...

  9. EXTJS下拉树ComboBoxTree参数提交及回显方法

    http://blog.csdn.net/wjlht/article/details/6085245 使用extjs可以构造出下拉数,但是不方便向form提交参数,在此,笔者想到一个办法,很方便Com ...

随机推荐

  1. 【Luogu4707】重返现世（min-max容斥）

    [Luogu4707]重返现世(min-max容斥) 题面 洛谷 求全集的\(k-max\)的期望 题解 \(min-max\)容斥的证明不难,只需要把所有元素排序之后考虑组合数的贡献,容斥系数先设出 ...

  2. neutron相关知识

    Neutron 对虚拟三层网络的实现是通过其 L3 Agent (neutron-l3-agent).该 Agent 利用 Linux IP 栈.route 和 iptables 来实现内网内不同网络 ...

  3. Redis主从复制与高可用方案

    redis简单介绍 Redis 是完全开源免费的,遵守BSD协议,是一个高性能的key-value数据库.Redis与其他key – value缓存产品有以下三个特点: 支持数据的持久化,可以将内存中 ...

  4. Apache POI - Java Excel APIs

    文档来源:https://www.yiibai.com/apache_poi/ POI 什么是Apache POI? Apache POI是一种流行的API,它允许程序员使用Java程序创建,修改和显 ...

  5. Java io概述

    内容来源:http://ifeve.com/java-io/ Java IO 概述 输入流可以理解为向内存输入,输出流可以理解为从内存输出 Java的IO包主要关注的是从原始数据源的读取以及输出原始数 ...

  6. 【Asia Yokohama Regional Contest 2018】Arithmetic Progressions

    题目大意:给定 N(1<N<=5000) 个不同元素组成的集合,求从中选出若干数字组成的等差数列最长是多少. 题解:直接暴力有 \(O(n^3)\) 的算法,即:枚举等差数列的前两个值,再 ...

  7. mciSendString 多线程播放多首音乐 & 注意事项

    昨天晚上遇到一个问题: 使用 mciSendString  控制播放多首音乐的时候,出现最后一次播放的音乐无法通过 mciSendString ("close mp3") 关闭音乐 ...

  8. struts2 UI标签 和 主题

    四.Struts2的UI标签和主题 1.Struts2中UI标签的优势 自动的数据回显和错误提示功能 自带的简单样式和排版 2.表单标签的通用属性 说明:UI标签中value的取值一般都是字符串. 2 ...

  9. 高级组件——分割面板JSplitPane

    分割面板:JSplitPane(方向),默认水平分割.JSplitPane.HORIZONTAL_SPLIT,JSplitPane.VERTICAL_SPLITJSplitPane(方向,boolea ...

  10. （set）MG loves gold hdu6019

    MG loves gold Time Limit: 3000/1500 MS (Java/Others)    Memory Limit: 262144/262144 K (Java/Others) ...