{"id":13535850,"url":"https://github.com/lisiyizu/vue-ztree","last_synced_at":"2025-04-02T02:31:36.280Z","repository":{"id":94123683,"uuid":"72504964","full_name":"lisiyizu/vue-ztree","owner":"lisiyizu","description":null,"archived":false,"fork":false,"pushed_at":"2018-07-16T07:25:42.000Z","size":465,"stargazers_count":145,"open_issues_count":10,"forks_count":69,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-11-03T00:32:52.275Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lisiyizu.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2016-11-01T04:51:59.000Z","updated_at":"2024-09-16T10:18:23.000Z","dependencies_parsed_at":"2023-04-25T00:46:42.697Z","dependency_job_id":null,"html_url":"https://github.com/lisiyizu/vue-ztree","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lisiyizu%2Fvue-ztree","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lisiyizu%2Fvue-ztree/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lisiyizu%2Fvue-ztree/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lisiyizu%2Fvue-ztree/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lisiyizu","download_url":"https://codeload.github.com/lisiyizu/vue-ztree/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246743687,"owners_count":20826584,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-01T09:00:30.168Z","updated_at":"2025-04-02T02:31:35.914Z","avatar_url":"https://github.com/lisiyizu.png","language":"Vue","funding_links":[],"categories":["UI组件"],"sub_categories":[],"readme":"# vue-ztree\n\n### Vue小伙伴交流群: 590688906\n\n[vue-ztree-2.0 版本地址](https://github.com/lisiyizu/vue-ztree-2.0)\n\n[vue-ztree 演示预览地址](https://lisiyizu.github.io/vue-ztree)\n\n[vue-ztree-2 演示预览地址](https://lisiyizu.github.io/vue-ztree-2)\n\n![](vue-ztree.png)\n\n通过以下demo来实现\n\n### app.vue代码如下\n\n```html\n\u003ctemplate\u003e\n  \u003cdiv id=\"app\"\u003e\n    \u003ch1\u003e{{ msg }}\u003c/h1\u003e\n    \u003cdiv style='width:280px;' v-if='ztreeDataSource.length\u003e0'\u003e\n      \u003cvue-ztree :list.sync='ztreeDataSource' :func='nodeClick' :expand='expandClick' :contextmenu='contextmenuClick' :is-open='true'\u003e\u003c/vue-ztree\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport vueZtree from './component/vue-ztree.vue'\nexport default {\n  data () {\n    return {\n      msg: 'Hello Vue-Ztree!',\n      ztreeDataSource:[{\n                id:1,\n                name:\"音乐\",\n                children:[]\n      },{\n          id:2,\n          name:\"视频\",\n          children:[{\n             id:3,\n             name:\"电影\",\n             children:[{\n                id:4,\n                name:\"国产电影\"\n             },{\n                id:5,\n                name:\"好莱坞电影\"\n             },{\n                id:6,\n                name:\"小语种电影\"\n             }]\n          },{\n             id:7,\n             name:\"短片\",\n             children:[{\n                id:9,\n                name:\"电视剧\"\n             },{\n                id:10,\n                name:\"短片\"\n             }]\n          }]\n      }]\n    }\n  },\n  methods:{\n    // 点击节点\n    nodeClick:function(m){\n       console.log(JSON.parse(JSON.stringify(m)));\n    },\n    // 右击事件\n    contextmenuClick:function(){\n       console.log(\"触发了自定义的contextmenuClick事件\");\n    },\n    // 点击展开收起\n    expandClick:function(m){\n       console.log(JSON.parse(JSON.stringify(m)));\n       // 点击异步加载\n       if(m.isExpand) {\n          // 动态加载子节点, 模拟ajax请求数据\n         // 请注意 id 不能重复哦。\n         if(m.hasOwnProperty(\"children\")){\n            \n            m.loadNode = 1; // 正在加载节点\n\n            setTimeout(()=\u003e{\n\n              m.loadNode = 2; // 节点加载完毕\n\n              m.isFolder = !m.isFolder; \n\n              var node = JSON.parse(JSON.stringify(m));\n\n             // 动态加载子节点, 模拟ajax请求数据\n             // 请注意 id 不能重复哦。\n             if(node.hasOwnProperty(\"children\")){\n                  node.children.push({\n                      id:+new Date(),\n                      name:\"动态加载节点1\",\n                      path:\"\",\n                      clickNode:false,\n                      isFolder:false,\n                      isExpand:false,\n                      loadNode:0,\n                      children:[{\n                            id:+new Date()+1,\n                            name:\"动态加载末节点\",\n                            path:\"\",\n                            clickNode:false,\n                            isFolder:false,\n                            isExpand:false,\n                            loadNode:0\n                      }]\n                  });\n                  \n                  m.children = node.children;\n             }\n\n            },1000)\n            \n         }\n       }\n    }\n  },\n  components:{\n    vueZtree\n  }\n}\n\u003c/script\u003e\n\n\u003cstyle\u003e\nbody {font-family: Helvetica, sans-serif;}\n\u003c/style\u003e\n\n```\n\n###vue-ztree/初始化参数\n\u003ctable  border=\"0\" align=\"left\"\u003e\n\t\u003ctbody\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd \u003e参数\u003c/td\u003e\n\t\t\t\u003ctd \u003e类型\u003c/td\u003e\n\t\t\t\u003ctd \u003e默认值\u003c/td\u003e\n\t\t\t\u003ctd \u003e描述\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd \u003elist\u003c/td\u003e\n\t\t\t\u003ctd \u003eArray\u003c/td\u003e\n\t\t\t\u003ctd \u003e-\u003c/td\u003e\n\t\t\t\u003ctd \u003e树的结构数据源\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n      \u003ctd \u003efunc\u003c/td\u003e\n      \u003ctd \u003eFunction\u003c/td\u003e\n      \u003ctd \u003e-\u003c/td\u003e\n      \u003ctd \u003e点击节点事件\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd \u003econtextmenu\u003c/td\u003e\n      \u003ctd \u003eFunction\u003c/td\u003e\n      \u003ctd \u003e-\u003c/td\u003e\n      \u003ctd \u003e右击节点事件\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd \u003eexpand\u003c/td\u003e\n      \u003ctd \u003eFunction\u003c/td\u003e\n      \u003ctd \u003e-\u003c/td\u003e\n      \u003ctd \u003e点击展开/收起的方法（一般在异步加载的时候使用, 非异步加载传null）\u003c/td\u003e\n    \u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd \u003eis-open\u003c/td\u003e\n\t\t\t\u003ctd \u003eBealoon\u003c/td\u003e\n\t\t\t\u003ctd \u003etrue\u003c/td\u003e\n\t\t\t\u003ctd \u003e是否展开树\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\u003c/tbody\u003e\n\u003c/table\u003e\n\n\n## Build Setup\n\n``` bash\n# install dependencies\nnpm install\n\n# serve with hot reload at localhost:8080\nnpm run dev\n\n# build for production with minification\nnpm run build\n```\n\nFor detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flisiyizu%2Fvue-ztree","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flisiyizu%2Fvue-ztree","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flisiyizu%2Fvue-ztree/lists"}