摘要：
--[注]ofin的索引+1 v-是否与Vue和Uniapp相同？索引遍历是从0开始还是从1开始--˃11111˃˂Viewv if=“！--使用方法从“@/assets/org-tree/borg树”导入borgTree；注册导出默认值｛components:{borgTree}｝使用
<template> <view class="treetable"> <view style="display:table-caption !important;text-align:center !important;" > <view class="kuang" @click.native.stop="selectedClick(treedata)">{{treedata.name}}{{treedata.userCount}}人</view> <br/> <span style="border-left:1px solid;height:10upx;"></span> </view> <view v-if="treedata.children && treedata.children.length > 1"> <view v-for=" index of treedata.children.length" :key="index"> <view class="treetable"> <view> <view v-for="index2 of 2" :key="index2"> <view v-if="((index+1)*2-(index2+1)%2 -1) == 0"> <text style="visibility: hidden;"> 1 </text> </view> <!-- [注意]index+1 是v-for 的 of in与Vue和Uniapp是不是一样？遍历下标是从0还是1开始 --> <view v-else-if="((index+1)*2-(index2+1)%2 -1) == 1" :style="lefttoplinestyle"> <text style="visibility: hidden;"> 1 </text> </view> <view v-else-if="((index+1)*2-(index2+1)%2 -1) == treedata.children.length * 2 - 2" :style="righttoplinestyle"> <text style="visibility: hidden;"> 1 </text> </view> <view v-else-if="((index+1)*2-(index2+1)%2 -1) == treedata.children.length * 2 - 1"> <text style="visibility: hidden;"> 1 </text> </view> <view v-else-if="((index+1)*2-(index2+1)%2 -1) % 2 == 1" :style="lefttoplinestyle"> <text style="visibility: hidden;"> 1 </text> </view> <view v-else-if="((index+1)*2-(index2+1)%2 -1) % 2 == 0" :style="toplinestyle"> <text style="visibility: hidden;"> 1 </text> </view> </view> </view> </view> </view> </view> <view> <view v-for=" (children,index) in treedata.children" :key="index" style="vertical-align:top;text-align: center;"> <view v-if="!children.children || children.children.length == 0" class="kuang" @click.native.stop="selectedClick(children)"> {{children.name}}{{children.userCount}}人 </view> <borgTree ref="btree" v-else :treedata="children" @clickNode="selectedClick"></borgTree> </view> </view> </view> </template> <script> import borgTree from '@/components/gld-tree/borg-tree-div.vue'; export default { components: { borgTree }, name: "grp", props: { treedata: Object, }, data() { return { lefttoplinestyle: "border-top:1px solid;border-left:1px solid;", toplinestyle: "border-top:1px solid;", righttoplinestyle: "border-top:1px solid;border-right:1px solid;" } }, created() { }, methods: { selectedClick(node) { this.$emit("clickNode", node) } } }; </script> <style> .kuang { border-radius: 5px !important; word-wrap: break-word; display: inline-block !important; padding: 10upx !important; font-size: 28upx !important; border: 1px solid #333333 !important; margin: 0upx 8upx !important; width: 1em; /* min- 200upx !important; */ } .treetable { width: 100% ; display: table; } .treetable > view { display: table-row ; } .treetable > view > view { display: table-cell ; vertical-align: middle ; text-align: center ; } </style> <!-- 使用方式 引入 import borgTree from "@/assets/org-tree/borg-tree"; 注册 export default { components: {borgTree} } 使用 <borgTree :treedata="mytree" @clickNode="clickNode"/> 数据结构 mytree:{ name:"项目部", children:[ { name:"经理1", children:[ { name:"组11212"}, { name:"组1123"}, { name:"组1231"} ] } ] } -->