临海新闻网,憋宝传奇,女人军婚如山
一直打算偷懒使用个现成的树组件，但是在github上找了一大圈没有找到真正满足应用开发的树组件，所以没办法只能自己写了一个，开源出来希望可以帮助到需要的人，同时如果大家觉得好用，我可以顺带骗骗★（希望喜欢的朋友对我体力的肯定可以点下★ ），由于我也算刚接触vue，所以难免有所考虑不周的地方，希望大家在issue里面指正。组件重点是父子组件数据的共享和状态保持，我是利用了下vuex的思路，采用一个控制仓库完成。
github 地址
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: {
showcheckbox: true, //是否支持多选
search: {
useinitial: true, //是否支持首字母搜索
useenglish: false, //是否是英文搜索
customfilter: null // 自定义节点过滤函数
}
/* 节点元素 */
{
id: 1, //节点标志
label: '一级节点', //节点名称
open: true, // 是否打开节点
checked: false, //是否被选中
parentid: null, //父级节点id
visible: true, //是否可见
searched: false, //是否是搜索值
children: [] //子节点
}
方法
事件
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。
如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复
详解element上传组件before-remove钩子问题解决
vue.js中使用微信扫一扫解决invalid signature问题(完美解决)
网友评论