zoukankan      html  css  js  c++  java
  • 开源框架.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学习(四)项目升级

  • 相关阅读:
    返回数组指针的函数形式
    zoj 2676 网络流+01分数规划
    2013 南京理工大学邀请赛B题
    poj 2553 强连通分支与缩点
    poj 2186 强连通分支 和 spfa
    poj 3352 边连通分量
    poj 3177 边连通分量
    poj 2942 点的双连通分量
    poj 2492 并查集
    poj 1523 求割点
  • 原文地址:https://www.cnblogs.com/zhaogaojian/p/10205855.html
Copyright © 2011-2022 走看看