data.expand = !data.expand;
if (!data.expand && data.children) {
this.collapse(data.children);
} else {
this.$set(data, "expand", true);
toggleExpand(data, val) {
if (Array.isArray(data)) {
data.forEach((item)=> {
this.$set(item, "expand", val);
if (item.children) {
this.toggleExpand(item.children, val);
} else {
this.$set(data, "expand", val);
if (data.children) {
this.toggleExpand(data.children, val);
NodeClick(e,data){
console.log(e)
// e 为 event
console.log(data)
// 当前项的所有详情 如：id label children
renderContent(h, data) {
return (
{data.label}
注意：一定要在style中引入样式文件，否则展开收缩按钮显示不出来
<style lang="less">
@import '../libs/org-tree.less';
</style>
样式文件参考码云
码云地址
Please use the , vue-draggable-nested-tree will no longer be maintained.
请使用新发布的, vue-draggable-nested-tree 将不再维护.
Please use the , vue-draggable-nested-tree will no longer be maintained.
请使用新发布的, vue-draggable-nested-tree 将不再维护.
Please use the , vue-draggable-nested-tree will no longer be maintained.
请使用新发布的, vue-draggable-nested-tree 将不再维护.
vue-draggable-nested-tree vue可拖拽树, 可跨树拖拽
这是可拖拽树组件. 此组件没
vue树基于vue 2.X的树状UI。install npm install vue-trees --save或cnpm i vue-trees -S快速入门从'vue'导入vue导入vueTrees fue树基于vue 2的树状UI .X install npm install vue-trees --save或cnpm i vue-trees -S快速入门从'vue'导入Vue从'vue-trees'导入vueTrees Vue.use（vueTrees）API DOC（中文文档）数据属性数据属性不支持从原型链继承的属性（如果可以考虑是否使用复杂度较低的模型，建议检查代码）参数描述类型可编辑默认值标题节点名称字符串-—扩展Whet
更新时间2020/12/02修复初步修改数据不渲染问题对应版本：vue-okr-tree@1.0.5
更新时间2020/12/05修改部分展示bug对应版本：vue-okr-tree@1.0.6
更新时间2021/01/13增加updateKeyChildren方法：vue-okr-tree@1.0.7
更新时间2021/02/03增加node-btn-content属性，对展开圆圈内容自定义处理vue-okr-tree@1.0.8
更新时间2021/02/04增加showNodeNum属性显示子节点数vue-okr-tree@1.0.9
文档和事例
地址： :
Vue-Okr-树
基于Vue 2的组织架构树组件
# use npm
npm i vue-okr-tree
# use yarn
yarn add vue-okr-tree
import { Vu
import Vue from 'vue'
import Vue2OrgTree from 'vue2-org-tree'
Vue . use ( Vue2OrgTree )
// ...
# css
< link href =" https://unpkg.com/vue2-org-tree/dist/style.css " >
< script src ="
vue2-org-tree本来老早就用了一直没记录，今天发现了bug，同事fix后记录一下吧，再遇到直接就command c + v 就好了
vue2-org-tree是一款插件快速构造树形（element ui 里的太丑了）
step1 准备树形数据
这是我的数据可以直接拿着测试
"treeData":[
"sorted":1,
"children":[
java npm install --save-dev less less-loader npm install --save-dev vue2-org-tree
tips:因为需要引入less的样式 所以需要安装less
2.main.js引入
import Vue2OrgTree from 'vue2-org-tree';
Vue.use(Vue2OrgTree)
3.在页面中直接调用
<vue2-org-tree :data="orginList" />
//data
近期在实现组织结构树这一功能，用echarts的树形图表实现之后，觉得样式不能调整为自己想要的，且偏差较大。于是，在了解了相关的插件后，使用vue2-org-tree 这一插件实现这一功能，对其中的坑有点体会。
1.安装 vue2-org-tree
npm ivue2-org-tree --save-dev
2.安装 loader
npm install -D less-loader less
*：官方文档引入样式的时候是导入的 less 文件
3.项目中导入vu...
