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

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. 【转】c语言中的#号和##号的作用

    @2019-01-25 [小记] c语言中的#号和##号的作用

  2. ubuntu “无法获得锁 /var/lib/dpkg/lock -open”

    在ubuntu系统终端下,用apt-get install 安装软件的时候,如果在未完成下载的情况下将终端中断,此时 apt-get进程可能没有结束.结果,如果再次运行apt-get install ...

  3. 面试---Python中的模块和包是什么？

    python模块是: 自我包含并且有组织的代码片段为模块. 表现形式为:写的代码保存为文件.这个文件就是一个模块.sample.py 其中文件名smaple为模块名字. python包是: 包是一个有 ...

  4. 课后选做题：MyCP

    目录 CP命令了解 MyCP实现 CP命令了解 作用:cp指令用于复制文件或目录,如同时指定两个以上的文件或目录,且最后的目的地是一个已经存在的目录,则它会把前面指定的所有文件或目录复制到此目录中.若 ...

  5. 区块链使用Java，以太坊 Ethereum, web3j， Spring Boot

    Blockchain is one of the buzzwords in IT world during some last months. This term is related to cryp ...

  6. DP题组

    按照顺序来. Median Sum 大意: 给你一个集合,求其所有非空子集的权值的中位数. 某集合的权值即为其元素之和. 1 <= n <= 2000 解: 集合配对,每个集合都配对它的补 ...

  7. Django session相关操作

    Django session 是存储在数据库中的所以要先跟数据库建立连接 本连接有Django跟数据库建立连接的操作:https://www.cnblogs.com/Niuxingyu/p/10296 ...

  8. 第十五节，卷积神经网络之AlexNet网络详解(五)

    原文 ImageNet Classification with Deep ConvolutionalNeural Networks 下载地址:http://papers.nips.cc/paper/4 ...

  9. 高级组件——表格模型TableModel

    通常增删改表格,多使用表格模型,效率更高.具体通过DefaultTableModel类中的方法来实现. TableModel接口——AbstractTableModel抽象类——DefaultTabl ...

  10. (LIS) P1091 合唱队形 洛谷

    题目描述 NN位同学站成一排,音乐老师要请其中的(N-KN−K)位同学出列,使得剩下的KK位同学排成合唱队形. 合唱队形是指这样的一种队形:设K位同学从左到右依次编号为1,2,…,K1,2,…,K,他 ...