2017国办网站建设规范,举报网站赚钱,做网站是用什么软件做的,合肥网站快速排名提升vue2-org-tree 用于创建和显示组织结构树状图#xff0c;帮助开发者轻松地可视化组织结构#xff0c;例如公司的层级、部门之间的关系、团队成员等。其主要功能有#xff1a;自定义节点、可折叠节点、支持拖放、搜索、导航等功能。 这里我们主要使用 vue2-org-tree 进行多次… vue2-org-tree 用于创建和显示组织结构树状图帮助开发者轻松地可视化组织结构例如公司的层级、部门之间的关系、团队成员等。其主要功能有自定义节点、可折叠节点、支持拖放、搜索、导航等功能。 这里我们主要使用 vue2-org-tree 进行多次数、多种类对商品信息定价以可视化的结构图展示使其更易于理解和浏览。 1. 安装依赖
# use npm
npm i vue2-org-tree# use yarn
yarn add vue2-org-tree2. 引入平台
import Vue from vue
import Vue2OrgTree from vue2-org-treeVue.use(Vue2OrgTree)3. 实现效果图 3. 代码实现
vue2-org-tree:datadata:horizontaltrue:collapsablefalse:label-class-namelabelClassName:render-contentrenderContent
/3.1 样式配置
style langless
.org-tree-node,
.org-tree-node-children {position: relative;margin: 0;padding: 0;list-style-type: none;:before, :after {transition: all .35s;}
}
.org-tree-node-label {position: relative;display: inline-block;.org-tree-node-label-inner {padding: 10px 15px;text-align: center;border-radius: 3px;box-shadow: 0 1px 5px rgba(0, 0, 0, .15);}
}
.org-tree-node-btn {position: absolute;top: 100%;left: 50%;width: 20px;height: 20px;z-index: 10;margin-left: -11px;margin-top: 9px;background-color: #fff;border: 1px dashed colors;border-radius: 50%;box-shadow: 0 0 2px rgba(0, 0, 0, .15);cursor: pointer;transition: all .35s ease;:hover {background-color: #e7e8e9;transform: scale(1.15);}:before, :after {content: ;position: absolute;}:before {top: 50%;left: 4px;right: 4px;height: 0;border-top: 1px dashed colors;}:after {top: 4px;left: 50%;bottom: 4px;width: 0;// border-left: 1px dashed colors;}.expanded:after {border: none;}
}
.org-tree-node {padding-top: 20px;display: table-cell;vertical-align: top;.is-leaf, .collapsed {padding-left: 10px;padding-right: 10px;}:before, :after {content: ;position: absolute;top: 0;left: 0;width: 50%;height: 19px;}:after {left: 50%;border-left: 1px dashed colors;}:not(:first-child):before,:not(:last-child):after {border-top: 1px dashed colors;}}
.collapsable .org-tree-node.collapsed {padding-bottom: 30px;.org-tree-node-label:after {content: ;position: absolute;top: 100%;left: 0;width: 50%;height: 20px;border-right: 1px dashed colors;}
}
.org-tree .org-tree-node {padding-top: 0;:after {border-left: 0;}
}
.org-tree-node-children {padding-top: 20px;display: table;:before {content: ;position: absolute;top: 0;left: 0;width: 50%;height: 20px;border-right: 1px dashed colors;border-left: none;}:after {content: ;display: table;clear: both;}
}.horizontal {.org-tree-node {display: inline-flex;justify-content: center;align-items: center;width: 100%;// display: table-cell;float: none;padding-top: 0;padding-left: 20px;.is-leaf, .collapsed {padding-top: 10px;padding-bottom: 10px;}:before, :after {width: 19px;height: 50%;}:after {top: 50%;left: 0;border-left: 0;}:only-child:before {top: 1px;border-bottom: 1px dashed colors;}:not(:first-child):before,:not(:last-child):after {border-top: 0;border-left: 1px dashed colors;}:not(:only-child):after {border-top: 1px dashed colors;}.org-tree-node-inner {display: table;}}.org-tree-node-label {display: table-cell;vertical-align: middle;}.collapsable .org-tree-node.collapsed {padding-right: 30px;.org-tree-node-label:after {top: 0;left: 100%;width: 20px;height: 50%;border-right: 0;border-bottom: 1px dashed colors;}}.org-tree-node-btn {top: 50%;left: 100%;margin-top: -11px;margin-left: 9px;} .org-tree-node:only-child:before {border-bottom: 0;}.org-tree-node-children {display: table-cell;padding-top: 0;padding-left: 20px;:before {top: 50%;left: 0;width: 20px;height: 0;border-left: 0;border-top: 1px dashed colors;}:after {display: none;} .org-tree-node {display: block;}}
}
/style3.2 定义 label 样式
使用 labelClassName API 给 label 上的 class从而实现定义 label 样式。
const colorObj {DEPOSIT: bg-blue,ESTIMATE: bg-green,PAYMENTS: bg-orange,
}
// 定义 label 样式
labelClassName (item) {if (item.pricingType) {return colorObj[item.pricingType]}
},我们可以看到常量 colorObj其对象中的 key 值是定价类型value 值是所对应的 class 名称。
style langless
.bg-green {color: #fff;background-color: #87d068;
}
.bg-blue {color: #fff;background-color: #2db7f5;
}
.bg-orange {color: #fff;background-color: #FF913A;
}
/style3.3 渲染节点
使用 renderContent API 来渲染子节点。
renderContent (h, item) {return (divspan classitem_name{this.getTitle(item)}/span{!item.name !item.skuName !item.pricingType [add].includes(this.mode) a classm-l-10 onClick{() this.$emit(open, item)}定价/a}/div )
},去除商品和已定价的数据其余添加定价按钮进行定价操作。由于 data 数据是树型结构不同层级的渲染逻辑不同因此我们将渲染逻辑抽离到 getTitle 方法中。代码如下
getTitle (item) {const max this.getPricingQtyMax(item)if (item.name) { // 根节点return item.name} else if (item.skuName) { // 商品信息return ${item.skuName} (${item.planMainQty}吨)} else if (item.pricingType) { // 已定价return span{pricingType._find(item.pricingType).name}: {item.pricingQty}吨 {item.price}元{(max 0) [add].includes(this.mode) a classc-red m-l-10 onClick{() this.$emit(cancel, { ...item, pricingQtyMax: max, pricingQty: max })}取消定价/a}/span} else { // 未定价return ${item.pricingQty} 吨 未定价}
},对于取消定价按钮显示逻辑由 getPricingQtyMax 方法处理的具体代码如下
getPricingQtyMax () {return function (item) {/* 货款未申请支付 | 定金/暂估款未定价部分 */if ([PAYMENTS].includes(item.pricingType)) {return NP.minus(item.pricingQty, item.applyQty || 0)} else if ([DEPOSIT, ESTIMATE].includes(item.pricingType)) {return NP.minus(item.pricingQty, handleTableTotal(pricingQty, item.children.filter(item item.pricingType)))}}
},
