Vue树形架构插件vue-org-tree
注：2019-8-21在从心_205a书友的帮助下解决了bug：节点无法展开问题
底下这个函数一定要写两个参数，如果只写onExpand(data)，data.expand结果是undefined
这个应该是插件的bug，一般只写一个参数也是可以
onExpand(e,data) {
if ("expand" in data) {
data.expand = !data.expand;
if (!data.expand && data.children) {
this.collapse(data.children);
}
} else {
this.$set(data, "expand", true);
}
}
注：2019-8-21解决了bug：点击选项要跳转链接，点击展开收缩按钮也会跳转
增加判断语句即可，默认展开收缩按钮对象里的url肯定是空
onNodeClick(e, data) {
//console.log(data.label);
if(data.url==null){
return false
}else{
window.open(data.url)
}
},
文档传送门https://github.com/hukaibaihu/vue-org-tree
使用步骤（这里以在vue-cli3的项目为例）
Ⅰ.安装：这边安装一定要加-D
cnpm install -D less-loader less
cnpm install -D vue2-org-tree
Ⅱ.在main.js引入注册
import Vue2OrgTree from 'vue2-org-tree';
Vue.use(Vue2OrgTree)
Ⅲ.在router.js中注册路由tree.vue
import tree from '../components/tree.vue';
routes增加配置
Ⅳ.在tree.vue里写页面
//示例代码
<template>
<div id="tree">
<div class="container">
<div class="col-md-10 col-md-offset-1">
<div class="page-header">
<h3>招行度量指标体系</h3>
</div>
<div class="row">
<div class="col-md-8 col-md-offset-2">
<form class="form-horizontal row">
<div class="col-md-4">
<div class="checkbox">
<label>
<input type="checkbox" v-model="horizontal" /> 横排
</label>
</div>
</div>
<div class="col-md-4">
<div class="checkbox">
<label>
<input type="checkbox" v-model="collapsable" /> 竖排
</label>
</div>
</div>
<div class="col-md-4">
<div class="checkbox">
<label>
<input type="checkbox" v-model="expandAll" @change="expandChange" /> 显示所有项
</label>
</div>
</div>
<p>
<br />
</p>
<p>
<br />
</p>
<div class="col-md-6">
<div class="form-group">
<label class="control-label col-md-5">背景色选择:</label>
<div class="col-md-7">
<select class="form-control" v-model="labelClassName">
<option value="bg-white">bg-white</option>
<option value="bg-orange">bg-orange</option>
<option value="bg-gold">bg-gold</option>
<option value="bg-gray">bg-gray</option>
<option value="bg-lightpink">bg-lightpink</option>
<option value="bg-chocolate">bg-chocolate</option>
<option value="bg-tomato">bg-tomato</option>
</select>
</div>
</div>
</div>
</form>
</div>
</div>
<p>
<br />
</p>
<div class="text-center">
<vue2-org-tree
name="test"
:data="data"
:horizontal="horizontal"
:collapsable="collapsable"
:label-class-name="labelClassName"
:render-content="renderContent"
@on-expand="onExpand"
@on-node-click="onNodeClick"
/>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
data: {
id: 0,
label: "度量指标体系",
children: [
{
id: 1,
label: "交付质量",
children: [
{
id: 11,
label: "生产质量",
children: [
{
id: 111,
label: "生产事件"
}
]
},
{
id: 12,
label: "开发质量",
children: [
{
id: 121,
label: "项目开发缺陷密度"
}
]
},
{
id: 13,
label: "发布质量",
children: [
{
id: 131,
label: "上线失败率"
}
]
},
{
id: 14,
label: "过程质量",
children: [
{
id: 141,
label: "项目过程符合度"
}
]
}
]
},
{
id: 2,
label: "交付效能",
children: [
{
id: 21,
label: "交付能力",
children: [
{
id: 211,
label: "功能点产出"
},
{
id: 212,
label: "代码行产出"
},
{
id: 213,
label: "上线投产次数"
},
{
id: 214,
label: "接收需求数"
},
{
id: 215,
label: "立项数"
},
{
id: 216,
label: "结项数"
},
{
id: 217,
label: "迭代速率"
},
{
id: 218,
label: "迭代完成率"
}
]
},
{
id: 22,
label: "交付效率",
children: [
{
id: 221,
label: "人均产出功能点"
},
{
id: 222,
label: "项目生产率"
}
]
}
]
},
{
id: 3,
label: "业务满意度",
children: [
{
id: 31,
label: "业务满意度"
}
]
},
{
id: 4,
label: "交付价值",
children: [
{
id: 41,
label: "业务价值关键指标"
}
]
},
{
id: 5,
label: "交付速度",
children: [
{
id: 51,
label: "需求评估速度",
children: [
{
id: 511,
label: "需求响应度"
}
]
},
{
id: 52,
label: "开发速度",
children: [
{
id: 521,
label: "完成度天数"
},
{
id: 522,
label: "完成度达标率"
},
{
id: 523,
label: "故事平均测试通过周期"
}
]
},
{
id: 53,
label: "发布速度",
children: [
{
id: 531,
label: "首次交付天数"
},
{
id: 532,
label: "首次交付达标率"
},
{
id: 533,
label: "故事平均发布周期"
}
]
},
{
id: 54,
label: "燃尽图"
},
{
id: 55,
label: "一次测试通过率"
}
]
},
{
id: 6,
label: "持续交付",
children: [
{
id: 61,
label: "技术债务率",
url: "https://world.taobao.com/"
},
{
id: 62,
label: "DEVOPS成熟度",
url: " http://www.baidu.com"
},
{
id: 63,
label: "DEVOPS健康度",
url: " https://www.google.com/"
}
]
}
]
},
horizontal: true,
collapsable: true,
expandAll: false,
labelClassName: "bg-white"
};
},
methods: {
renderContent(h, data) {
return data.label;
},
onExpand(e, data) {
if ("expand" in data) {
data.expand = !data.expand;
if (!data.expand && data.children) {
this.collapse(data.children);
}
} else {
this.$set(data, "expand", true);
}
},
//点击选项执行的方法，可以用于跳转到其他链接，注意一定要写协议头
onNodeClick(e, data) {
//console.log(data.label);
if(data.url==null){
return false
}else{
window.open(data.url)
}
},
collapse(list) {
var _this = this;
list.forEach(function(child) {
if (child.expand) {
child.expand = false;
}
child.children && _this.collapse(child.children);
});
},
expandChange() {
this.toggleExpand(this.data, this.expandAll);
},
toggleExpand(data, val) {
var _this = this;
if (Array.isArray(data)) {
data.forEach(function(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);
}
}
}
}
};
</script>
<style type="text/css">
.org-tree-node-label {
white-space: nowrap;
}
.bg-white {
background-color: white;
}
.bg-orange {
background-color: orange;
}
.bg-gold {
background-color: gold;
}
.bg-gray {
background-color: gray;
}
.bg-lightpink {
background-color: lightpink;
}
.bg-chocolate {
background-color: chocolate;
}
.bg-tomato {
background-color: tomato;
}
</style>
image
本文同步发表在我的个人博客：https://www.lubaojun.com/
网友评论