开源一个vue2的tree组件
一直打算偷懒使用个现成的树组件,但是在github上找了一大圈没有找到真正满足应用开发的树组件,所以没办法只能自己写了一个,开源出来希望可以帮助到需要的人,同时如果大家觉得好用,我可以顺带骗骗★(**希望喜欢的朋友对我体力输出的肯定可以点下★ **),由于我也算刚接触vue,所以难免有所考虑不周的地方,希望大家在issue里面指正。组件重点是父子组件数据的共享和状态保持,我是利用了下vuex的思路,采用一个控制仓库完成。
github 地址 vue-tree
How to run demo
npm install
npm run dev
效果图
示例
<template>
<div style="width:300px;">
<tree ref ='tree' :treeData="treeData" :options="options" @node-click='handleNode'/>
</div>
</template>
<script>
import Tree from '../components/tree/tree.vue'
export default {
name: 'test',
data () {
return {
options: {
showCheckbox: true,
search: {
useInitial: true,
useEnglish: false,
customFilter: null
}
},
treeData: [
{
id: 1,
label: '一级节点',
open: true,
checked: false,
parentId: null,
visible: true,
searched: false,
children: [
{
id: 2,
label: '二级节点-1',
checked: false,
parentId: 1,
searched: false,
visible: true
},
{
label: '二级节点-2',
open: true,
checked: false,
id: 3,
parentId: 1,
visible: true,
searched: false,
children: [
{
id: 4,
parentId: 3,
label: '三级节点-1',
visible: true,
searched: false,
checked: false
},
{
id: 5,
label: '三级节点-2',
parentId: 3,
searched: false,
visible: true,
checked: false
}
]
},
{
label: '二级节点-3',
open: true,
checked: false,
id: 6,
parentId: 1,
visible: true,
searched: false,
children: [
{
id: 7,
parentId: 6,
label: '三级节点-4',
checked: false,
searched: false,
visible: true
},
{
id: 8,
label: '三级节点-5',
parentId: 6,
checked: false,
searched: false,
visible: true
}
]
}
]
}
]
}
},
components: {Tree}
}
</script>
属性
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
options | 配置项 | Object | — | — |
treeData | 指定节点对象数组 | Array[Object] | — | — |
options: {
showCheckbox: true, //是否支持多选
search: {
useInitial: true, //是否支持首字母搜索
useEnglish: false, //是否是英文搜索
customFilter: null // 自定义节点过滤函数
}
/* 节点元素 */
{
id: 1, //节点标志
label: '一级节点', //节点名称
open: true, // 是否打开节点
checked: false, //是否被选中
parentId: null, //父级节点Id
visible: true, //是否可见
searched: false, //是否是搜索值
children: [] //子节点
}
方法
方法名 | 说明 | 参数 |
---|---|---|
getSelectedNodeIds | 若节点可被选择则返回目前被选中的节点Id所组成的数组 | 被选中的节点Id所组成的数组 |
getSelectedNodes | 若节点可被选择则返回目前被选中的节点组成的数组 | 被选中的节点所组成的数组 |
事件
事件名称 | 说明 | 回调参数 |
---|---|---|
node-click | 节点被点击时的回调 | 共1个参数,节点组件本身。 |
开源一个vue2的tree组件的更多相关文章
- 哪种缓存效果高?开源一个简单的缓存组件j2cache
背景 现在的web系统已经越来越多的应用缓存技术,而且缓存技术确实是能实足的增强系统性能的.我在项目中也开始接触一些缓存的需求. 开始简单的就用jvm(java托管内存)来做缓存,这样对于单个应用服务 ...
- 原创《开源一个用 vue 写的树层级组件 vue-ztree》
最近由于后台管理项目的需要,页面需要制作一个无限树的需求,我第一感就想到了插件 ztree,不过我觉得它太大了,还是自己动手丰衣足食吧. ztree 的 demo 地址:http://www.tree ...
- Antd组件库,利用Menu组件模拟一个简单Tree组件
当前工作中,前端的主要技术栈用是vue. 那React怎么办呢?总不至于把他扔在墙角吧! 只能在一些很小的项目上,也只有自己一个前端的时候,悄悄的上React. 当然,React项目UI组件还是最喜欢 ...
- 如何在Vue2中实现组件props双向绑定
Vue学习笔记-3 前言 Vue 2.x相比较Vue 1.x而言,升级变化除了实现了Virtual-Dom以外,给使用者最大不适就是移除的组件的props的双向绑定功能. 以往在Vue1.x中利用pr ...
- [置顶] Flex中Tree组件无刷新删除节点
在Tree组件中经常要删除某个节点,而删除之后重新刷新加载该Tree组件会影响整个操作效果和效率,因此,无刷新删除就比较好,既删除了节点也没有刷新tree,而使Tree的状态处于删除之前的状态. 无刷 ...
- antd Tree组件中,自定义右键菜单
最近项目中,有一个需求是自定义antd的Tree组件的右键菜单功能. 直接上代码 class Demo extends Component { state = { rightClickNodeTree ...
- 【转载】关于.NET下开源及商业图像处理(PSD)组件
原创]关于.NET下开源及商业图像处理(PSD)组件 阅读目录 1 前言 2 .NET图像处理组件总结 3.相关资源网址 本博客所有文章分类的总目录:http://www.cnblo ...
- antd tree组件文件名换行 + 点击展开时,自动收起同级其他展开目录
1.在项目中用 antd的tree组件的时候,遇到两个问题 1.文件名太长的话 会超出容器 很难看,解决方法如下 ` 引入css在global下设置 :global { .ant-tree li .a ...
- vue2.0 父子组件数据传递prop
vue的一个核心概念就是组件,而组件实例的作用域是孤立的,所以组件之间是不能直接引用其他组件的数据的.极端点举例来说,就是可以在同一个项目中,每一个组件内都可以定义相同名称的数据. data () { ...
随机推荐
- swift 运算符快速学习(建议懂OC或者C语言的伙伴学习参考)
昨晚看了swift 的运算符的知识点,先大概说一下,这个点和 c 或者oc 的算运符知识点一样,都是最基础最基础的.其他的最基本的加减乘除就不多说了.注意的有几点点..先说求余数运算: 一 :求余数运 ...
- JVM垃圾收集(GC)算法
判断对象是否已死 1. 引用计数算法 给对象中添加一个引用计数器,每当一个地方引用它时,计数器值就加1:当引用失败时,计数器值就减1:任何时刻计数器为0的对象就是不能再被使用的. 主流的Java虚拟机 ...
- CSS3的属性为什么要带前缀
使用过CSS3属性的同学都知道,CSS3属性都需要带各浏览器的前缀,甚至到现在,依然还有很多属性需要带前缀.这是为什么呢? 我的理解是,浏览器厂商以前就一直在实施CSS3,但它还未成为真正的标准.为此 ...
- js移动端向左滑动出现删除按钮
最近在做移动端项目时,需要实现一个列表页面的每一项item向左滑动时出现相应的删除按钮,本来想着直接使用zepto的touch.js插件,因为之前实现相同的功能时用过这个插件,当时还挺好用的,直接使用 ...
- Android开发8:数据存储(二)——SQLite数据库和ContentProvider的使用
前言 啦啦啦各位小伙伴们许久不见了~学期末和过年期间自己忙着做其他事没能及时更新Android开发系列课程的博客,实在是罪过罪过~ 好啦~废话不多说,进入我们今天的主题.今天我们将和大家学习其他的数据 ...
- ios常用资源网址链接
M了个J博客 http://www.cnblogs.com/mjios/tag/objective-c/ Cocoa China http://www.cocoachina.com git网 ht ...
- MySQL Sniffer
MySQL Sniffer 是360开源的一个基于 MySQL 协议的抓包工具, 能实时抓取客户端端请求,并格式化输出操作语句,操作十分简单.对于问题的定位,操作的审核是个不错的利器. Github地 ...
- Eclipse多个console的使用
我们在使用Eclipse开发服务器端和客户端时,经常需要同时运行服务器端和客户端,以便联调运行情况.而我之前一般有两种做法: 使用Java的命令行模式运行,但这种做法通常比较麻烦,因为要使用大串的cl ...
- 让SQL再快一点儿
文章转载自「开发者圆桌」一个关于开发者入门.进阶.踩坑的微信公众号 SQL即结构化查询语言(Structured Query Language),是一种特殊目的的编程语言,是一种数据库查询和程序设计语 ...
- Web平台安装及检测程序
软件名称:microsoft web platform installer 上图: 可以看做是一个App Store, 你再也不用东奔西跑去找什么开发软件,CMS等等了,直接打开这个,勾选上就安装吧, ...