Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/lisiyizu/vue-ztree
https://github.com/lisiyizu/vue-ztree
Last synced: 3 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/lisiyizu/vue-ztree
- Owner: lisiyizu
- Created: 2016-11-01T04:51:59.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2018-07-16T07:25:42.000Z (over 6 years ago)
- Last Synced: 2024-08-02T09:23:31.655Z (6 months ago)
- Language: Vue
- Size: 454 KB
- Stars: 146
- Watchers: 3
- Forks: 69
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-vue - vue-ztree - ztree?style=social) - 用 vue 写的树层级组件 (UI组件)
- awesome-github-vue - vue-ztree - 用 vue 写的树层级组件 (UI组件)
- awesome-github-vue - vue-ztree - 用 vue 写的树层级组件 (UI组件)
- awesome - vue-ztree - 用 vue 写的树层级组件 (UI组件)
README
# vue-ztree
### Vue小伙伴交流群: 590688906
[vue-ztree-2.0 版本地址](https://github.com/lisiyizu/vue-ztree-2.0)
[vue-ztree 演示预览地址](https://lisiyizu.github.io/vue-ztree)
[vue-ztree-2 演示预览地址](https://lisiyizu.github.io/vue-ztree-2)
通过以下demo来实现
### app.vue代码如下
```html
{{ msg }}
import vueZtree from './component/vue-ztree.vue'
export default {
data () {
return {
msg: 'Hello Vue-Ztree!',
ztreeDataSource:[{
id:1,
name:"音乐",
children:[]
},{
id:2,
name:"视频",
children:[{
id:3,
name:"电影",
children:[{
id:4,
name:"国产电影"
},{
id:5,
name:"好莱坞电影"
},{
id:6,
name:"小语种电影"
}]
},{
id:7,
name:"短片",
children:[{
id:9,
name:"电视剧"
},{
id:10,
name:"短片"
}]
}]
}]
}
},
methods:{
// 点击节点
nodeClick:function(m){
console.log(JSON.parse(JSON.stringify(m)));
},
// 右击事件
contextmenuClick:function(){
console.log("触发了自定义的contextmenuClick事件");
},
// 点击展开收起
expandClick:function(m){
console.log(JSON.parse(JSON.stringify(m)));
// 点击异步加载
if(m.isExpand) {
// 动态加载子节点, 模拟ajax请求数据
// 请注意 id 不能重复哦。
if(m.hasOwnProperty("children")){
m.loadNode = 1; // 正在加载节点
setTimeout(()=>{
m.loadNode = 2; // 节点加载完毕
m.isFolder = !m.isFolder;
var node = JSON.parse(JSON.stringify(m));
// 动态加载子节点, 模拟ajax请求数据
// 请注意 id 不能重复哦。
if(node.hasOwnProperty("children")){
node.children.push({
id:+new Date(),
name:"动态加载节点1",
path:"",
clickNode:false,
isFolder:false,
isExpand:false,
loadNode:0,
children:[{
id:+new Date()+1,
name:"动态加载末节点",
path:"",
clickNode:false,
isFolder:false,
isExpand:false,
loadNode:0
}]
});
m.children = node.children;
}
},1000)
}
}
}
},
components:{
vueZtree
}
}
body {font-family: Helvetica, sans-serif;}
```
###vue-ztree/初始化参数
参数
类型
默认值
描述
list
Array
-
树的结构数据源
func
Function
-
点击节点事件
contextmenu
Function
-
右击节点事件
expand
Function
-
点击展开/收起的方法（一般在异步加载的时候使用, 非异步加载传null）
is-open
Bealoon
true
是否展开树
## Build Setup
``` bash
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
```
For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).