• uni app 树状结构数据展示

    树状数据展示，可以点击item 将点击数据给父组件  ，满足自己需求。不喜勿喷，很简单可以根据自己需求改哈，不要问，点赞收藏就好。其实可以和上一篇文章uni app 自定义 带popup弹窗的input组件-CSDN博客结合使用，做成输入框带popup展示树状结构数据

    1. <template>
    2. 	<view>
    3. 		<view v-for="(node, index) in treeData" :key="node.id">
    4. 			<view v-if="!node.ishow">
    5.  
    6. 				<view v-if="uselast">
    7. 					<view v-if="node.children.length > 0">
    8. 						<view :style="'margin-left:'+(zjflag*30+32)+'rpx;'" class="item_name_ef"
    9. 							@tap.stop.prevent="item_click" :data-set="node" :id="index">
    10. 							<view>
    11. 								<text v-if="node.children"
    12. 									:style="'color:'+colors[zjflag]+';margin-right:10rpx'">{{title[zjflag]}}</text>
    13. 								{{ node.name }}
    14. 							</view>
    15. 							<text style="margin-left: 32rpx;color:#f00" v-if="node.children&&node.children.length > 0"
    16. 								@tap.stop.prevent="open_item(index)">{{image[node.isopen?0:1]}}</text>
    17. 						</view>
    18. 					</view>
    19. 					<view v-else>
    20. 						<view :style="'margin-left:'+(zjflag*30+32)+'rpx;'" class="item_name"
    21. 							@tap.stop.preventclick="item_click" :data-set="node" :id="index">
    22. 							<view>
    23. 								<text v-if="node.children"
    24. 									:style="'color:'+colors[zjflag]+';margin-right:10rpx'">{{title[zjflag]}}</text>{{ node.name}}
    25. 							</view>
    26. 							<text style="margin-left: 32rpx;color:#f00" v-if="node.children&&node.children.length > 0"
    27. 								@tap.stop.prevent="open_item(index)">{{image[node.isopen?0:1]}}</text>
    28. 						</view>
    29. 					</view>
    30. 				</view>
    31. 				<view v-else>
    32. 					<view :style="'margin-left:'+(zjflag*30+32)+'rpx;'" class="item_name" @tap.stop.prevent="item_click"
    33. 						:data-set="node" :id="index">
    34. 						<view>
    35. 							<text v-if="node.children"
    36. 								:style="'color:'+colors[zjflag]+';margin-right:10rpx'">{{title[zjflag]}}</text>{{ node.name }}
    37. 						</view>
    38. 						<text style="margin-left: 32rpx;color:#f00" v-if="node.children&&node.children.length > 0"
    39. 							@tap.stop.prevent="open_item(index)">{{image[node.isopen?0:1]}}</text>
    40. 					</view>
    41. 				</view>
    42.  
    43.  
    44. 			</view>
    45. 			<view v-if="node.isopen">
    46.  
    47. 				<TreeData v-if="node.children && node.children.length > 0" :tree-data="node.children"
    48. 					@callBack="mycallback" :uselast="uselast" :zjflag="zjflag+1" />
    49. 			</view>
    50.  
    51. 		</view>
    52. 	</view>
    53. </template>
    54.  
    55. <script>
    56. 	import TreeData from './TreeData.vue';
    57. 	export default {
    58. 		components: {
    59.  
    60. 			TreeData
    61. 		},
    62. 		name: 'TreeData',
    63. 		props: {
    64. 			treeData: {
    65. 				type: Array,
    66. 				required: true,
    67. 			},
    68. 			uselast: {
    69. 				type: Boolean,
    70. 				default: false
    71. 			},
    72. 			callback: {
    73. 				type: String,
    74. 				default: ''
    75. 			},
    76. 			showkey: {
    77. 				type: String,
    78. 				default: ''
    79. 			},
    80. 			zjflag: {
    81. 				type: Number,
    82. 				default: 0
    83. 			}
    84. 		},
    85. 		data() {
    86. 			return {
    87. 				title: ["①", "②", "③", "④", "⑤", "⑥", "⑦", "⑧", "⑨", "⑩"],
    88. 				// image: ["🔺", "🔻"]
    89. 				image: ["关", "开"],
    90. 				colors: ['#ff0', '#f00', '#00f', '#0ff', '#f0f', '#0f0'],
    91. 			}
    92. 		},
    93. 		methods: {
    94. 			item_click: function(e) {
    95. 				// console.log("item_click", JSON.stringify(item.currentTarget.dataset.set))
    96. 				let id = e.currentTarget.id
    97. 				let item = e.currentTarget.dataset.set
    98. 				if (this.uselast) {
    99. 					if (item.children.length == 0) {
    100. 						this.$emit('callBack', {
    101. 							mydetail: item
    102. 						});
    103. 					} else {
    104. 						this.treeData[id].isopen = !this.treeData[id].isopen
    105. 					}
    106.  
    107. 				} else {
    108.  
    109. 					this.$emit('callBack', {
    110. 						mydetail: item
    111. 					});
    112. 				}
    113. 				// if (item.isopen) {
    114.  
    115. 				// 	this.treeData[id].isopen = false
    116. 				// } else {
    117. 				// 	this.treeData[id].isopen = true
    118. 				// }
    119. 				this.$forceUpdate()
    120.  
    121. 			},
    122. 			open_item: function(id) {
    123.  
    124. 				this.treeData[id].isopen = !this.treeData[id].isopen
    125. 				this.$forceUpdate()
    126. 			},
    127. 			mycallback: function(item) {
    128. 				this.$emit('callBack', {
    129. 					mydetail: item
    130. 				});
    131.  
    132. 			}
    133. 		},
    134. 	};
    135. </script>
    136.  
    137. <style lang="scss" scoped>
    138. 	@function tovmin($rpx) {
    139. 		//$rpx为需要转换的字号
    140. 		@return #{$rpx * 100 / 750}vmin;
    141. 	}
    142.  
    143.  
    144. 	.item_name {
    145. 		display: flex;
    146. 		justify-content: space-between;
    147. 		font-size: 28;
    148. 		padding-top: 5rpx;
    149. 		padding-bottom: 5rpx;
    150. 		flex: 1;
    151. 		min-height: tovmin(80);
    152.  
    153. 		align-items: center;
    154.  
    155. 		text-align: left;
    156.  
    157. 		margin-right: tovmin(64);
    158. 		color: #333;
    159. 		font-weight: 600;
    160. 		overflow-y: auto;
    161. 		overflow-x: scroll;
    162.  
    163. 		border-bottom: solid #efefef 2rpx;
    164. 		white-space: normal;
    165. 		word-break: break-all;
    166. 		word-wrap: break-word;
    167. 	}
    168.  
    169. 	.item_name_ef {
    170. 		font-size: 28;
    171. 		padding-top: 5rpx;
    172. 		padding-bottom: 5rpx;
    173. 		flex: 1;
    174. 		min-height: tovmin(80);
    175. 		display: flex;
    176. 		justify-content: space-between;
    177. 		align-items: center;
    178.  
    179. 		text-align: left;
    180.  
    181.  
    182. 		margin-right: tovmin(64);
    183. 		color: #999;
    184. 		font-weight: 600;
    185. 		overflow-y: auto;
    186. 		overflow-x: scroll;
    187.  
    188. 		border-bottom: solid #efefef 2rpx;
    189. 		white-space: normal;
    190. 		word-break: break-all;
    191. 		word-wrap: break-word;
    192. 	}
    193. </style>

    讲一下 

            treeData 树状数据

            uselast  只能使用末级

            showkey  列表要展示的字段

            zjflag        树状结构第几层默认0开始

    使用  在父组件

    引用组件

    import TreeNode from './TreeNode.vue';

    components: {
                
                TreeNode
            },

        

    treeData: [{
                            id: 1,
                            name: '节点1',
                            ishow: false,
                            isopen: true,
                            children: [{
                                    id: 2,
                                    name: '子1-节点1',
                                    ishow: false,
                                    isopen: true,
                                    children: []
                                },
                                {
                                    id: 3,
                                    name: '子2-节点1',
                                    ishow: false,
                                    isopen: true,
                                    children: [{
                                        id: 4,
                                        name: '孙1-子2-节点1',
                                        ishow: false,
                                        isopen: true,
                                        children: []
                                    }]
                                },
                            ],
                        },
                        {
                            id: 5,
                            name: '节点2',
                            ishow: false,
                            isopen: true,
                            children: [{
                                    id: 6,
                                    name: '子1-节点2',
                                    ishow: false,
                                    isopen: true,
                                    children: [{
                                        id: 8,
                                        name: '孙1-子1-节点2',
                                        ishow: false,
                                        isopen: true,
                                        children: [{
                                            id: 8,
                                            name: '重1-孙1-子1-节点2',
                                            ishow: false,
                                            isopen: true,
                                            children: [{
                                                id: 9,
                                                name: '曾1-重1-孙1-子1-节点2',
                                                ishow: false,
                                                isopen: true,
                                                children: [{
                                                    id: 9,
                                                    name: '僧1-曾1-重1-孙1-子1-节点2',
                                                    ishow: false,
                                                    isopen: true,
                                                    children: []
                                                }]
                                            }]
                                        }]
                                    }]
                                },
                                {
                                    id: 7,
                                    name: '子2-节点2',
                                    ishow: false,
                                    isopen: true,
                                    children: [{
                                        id: 8,
                                        name: '孙1-子2-节点2',
                                        ishow: false,
                                        isopen: true,
                                        children: [{
                                            id: 8,
                                            name: '重1-孙1-子2-节点2',
                                            ishow: false,
                                            isopen: true,
                                            children: [{
                                                id: 9,
                                                name: '曾1-重1-孙1-子2-节点2',
                                                ishow: false,
                                                isopen: true,
                                                children: [{
                                                    id: 9,
                                                    name: '僧1-曾1-重1-孙1-子2-节点2',
                                                    ishow: false,
                                                    isopen: true,
                                                    children: []
                                                }]
                                            }]
                                        }]
                                    }]
                                },
                            ],
                        },

                    ],

        tree_node_back: function(e) {
                    if (e.mydetail) {
                        this.tree_node_back(e.mydetail)

                    } else {
                        console.log("tree_node_back=222==", JSON.stringify(e))
                    }

                },

    注意  treedata 中  isshow 是翻着的 false 展示  true 隐藏  isopen 是正常  false 关闭  true 展开

  • 相关阅读:
    借助这个宝藏神器，我成为全栈了
    java.swing 飞机大战小游戏
    DockerFile微服务实战
    MySQL系列-高级-深入理解Mysql事务隔离级别与锁机制01
    JVM的运行时数据区
    conda常用指令
    MongoDB快速上手
    数据结构四：线性表之带头结点的单向循环循环链表的设计
    利星行汽车携手南凌科技 拥抱网络数字化变革
    记录 | docker权限原因导致service ssh start失败
  • 原文地址：https://blog.csdn.net/yuehua_zhang/article/details/139796390