• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

    v-tree: 基于vue封装的树形菜单,已实现单选、复选、级联中选、单选前回调、单选事件 ...

    原作者: [db:作者] 来自: 网络 收藏 邀请

    开源软件名称:

    v-tree

    开源软件地址:

    https://gitee.com/bweird/v-tree

    开源软件介绍:

    what is v-tree?

    基于vue树形菜单

    en:A demo path: v-tree/src/components/vTreeDemo.Vue

    zh:一个demo的路径: v-tree/src/components/vTreeDemo.Vue

    Explain:

    zh:单选、复选、复选是/否级联选择(默认级联选中)、是否展示下拉虚线、点击节点回调函数,返回true 选中并触发选中事件,false相反,
    节点选中事件,返回选中节点信息和上个选中节点信息,选中/取消选中复选框事件,将返回所有选中复选框数据
    异步加载数据

    vue自定义变量和函数说明

    Default single selection

    :treeNode     type:json    default:[]

    标准json tree节点,name属性必填

    :allOpen      type:boolean    default:false

    开启/关闭所有节点

    :nodeTrigger     type:boolean     default:false

    点击节点是否触发节点事件

    @call    type:Function     parameter:inside treeNode,You can change it and the page will be re-rendered.

    初始化回调函数 参数为节点数据的深拷贝,你可以修改此数据,tree将会重新渲染

    :beforeClick    type:Function     parameter:Current node information(参数:当前节点信息)

    击节点前触发回调函数,return false 无法触发clickNode事件

    :clickNode    type:Function     parameter 1:Current node information,parameter 2:Last selected node information(上一个选中的节点信息)

    点击节点 回调函数

    :checkBox    type:boolean     default:false

    开启/关闭复选框

    :checkBoxType    type:boolean     default:true

    开启/关闭级联选中

    @checkBoxCall    type:Function     parameter:All selected node sets(所有选中的节点集合)

    选中/取消选中复选框回调函数

    :async    type:boolean     default:false

    是否开启异步 默认关闭

    :asyncCall    type:Function     parameter 1:Current node information,parameter 2:callback function,Receive an array parameter  Example:asyncCall(data, call) {    //data:Current node information        setTimeout(function () {          let hm = '' + (new Date()).getTime();          let addNode = [            {id: hm, name: "children node" + hm.substr(hm.length - 4, hm.length)},          ];          call(addNode);  //callback function        }, 800);      }

    异步回调函数function(data,call),data:current node, call 回调执行,接收一个数组参数

    一个完整的示例:

        <Tree        :treeNode="treeNode"        :allOpen="allOpen"        :nodeTrigger="nodeTrigger"        :checkBox="checkBox"        :beforeClick="beforeClick"        :checkBoxType="checkBoxType"        :clickNode="clickNode"        :hiddenLine="hiddenLine"        @checkBoxCall="asyncCheckBoxCall"        @call='callAsync'        :async="async"        :asyncCall="asyncCall"    />

    Pull Request

    Build Setup

    # install dependenciesnpm install# serve with hot reload at localhost:8089npm run dev

    鲜花

    握手

    雷人

    路过

    鸡蛋
    该文章已有0人参与评论

    请发表评论

    全部评论

    专题导读
    上一篇:
    hzqing-vue-timeline: Vue时间轴插件发布时间:2022-03-23
    下一篇:
    yylAdminWeb: yylAdmin后台前端。发布时间:2022-03-23
    热门推荐
    阅读排行榜

    扫描微信二维码

    查看手机版网站

    随时了解更新最新资讯

    139-2527-9053

    在线客服(服务时间 9:00~18:00)

    在线QQ客服
    地址:深圳市南山区西丽大学城创智工业园
    电邮:jeky_zhao#qq.com
    移动电话:139-2527-9053

    Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap