• uni-app tree(树状) 组件

    先看效果：

    组件代码：

    1. <template>
    2. 	<view class="next-tree">
    3. 		<view class="next-tree-mask" :class="{'show':showTree}" @tap="_cancel"></view>
    4. 		<view class="next-tree-cnt" :class="{'show':showTree}">
    5. 			<view class="next-tree-bar">
    6. 				<view class="next-tree-bar-cancel" :style="{'color':cancelColor}" hover-class="hover-c" @tap="_cancel">取消</view>
    7. 				<view class="next-tree-bar-title" :style="{'color':titleColor}">{{title}}</view>
    8. 				<view class="next-tree-bar-confirm" :style="{'color':confirmColor}" hover-class="hover-c" @tap="_confirm">确定</view>
    9. 			</view>
    10. 			<view class="next-tree-view">
    11. 				<scroll-view class="next-tree-view-sc" :scroll-y="true">
    12. 					<block v-for="(item, index) in treeList" :key="index">
    13. 						<view class="next-tree-item" :style="[{
    14. 							paddingLeft: item.rank*15 + 'px',
    15. 							zIndex: item.rank*-1 +50
    16. 						}]"
    17. 						 :class="{
    18. 							border: border === true,
    19. 							show: item.show,
    20. 							last: item.lastRank,
    21. 							showchild: item.showChild,
    22. 							open: item.open,
    23. 						}">
    24. 							<view class="next-tree-label" @tap.stop="_treeItemTap(item, index)">
    25. 								<image class="next-tree-icon" :src="item.lastRank ? lastIcon : item.showChild ? currentIcon : defaultIcon"></image>
    26. 								{{item.name}}
    27. 							</view>
    28. 							<view class="next-tree-check" @tap.stop="_treeItemSelect(item, index)" v-if="selectParent?true:item.lastRank">
    29. 								<view class="next-tree-check-yes" v-if="item.checked" :class="{'radio':!multiple}" :style="{'border-color':confirmColor, 'background-color':confirmColor}">
    30. 									<view class="next-tree-check-yes-b" :style="{'background-color':confirmColor}">
    31. 										<text class="icon-text">✔</text>
    32. 									</view>
    33. 								</view>
    34. 								<view class="next-tree-check-no" v-else :class="{'radio':!multiple}" :style="{'border-color':confirmColor}"></view>
    35. 							</view>
    36. 						</view>
    37. 					</block>
    38. 				</scroll-view>
    39. 			</view>
    40. 		</view>
    41. 	</view>
    42. </template>
    43.  
    44. <script>
    45. 	export default {
    46. 		name: "next-tree",
    47. 		props: {
    48. 			treeData: {
    49. 				type: Array,
    50. 				default: function() {
    51. 					return []
    52. 				}
    53. 			},
    54. 			valueKey: {
    55. 				type: String,
    56. 				default: 'id'
    57. 			},
    58. 			labelKey: {
    59. 				type: String,
    60. 				default: 'label'
    61. 			},
    62. 			childrenKey: {
    63. 				type: String,
    64. 				default: 'children'
    65. 			},
    66. 			title: {
    67. 				type: String,
    68. 				default: ''
    69. 			},
    70. 			multiple: { // 是否可以多选
    71. 				type: Boolean,
    72. 				default: false
    73. 				// default: true
    74. 			},
    75. 			selectParent: { //是否可以选父级
    76. 				type: Boolean,
    77. 				default: false
    78. 			},
    79. 			foldAll: { //折叠时关闭所有已经打开的子集，再次打开时需要一级一级打开
    80. 				type: Boolean,
    81. 				default: false
    82. 			},
    83. 			confirmColor: { // 确定按钮颜色
    84. 				type: String,
    85. 				default: '#f9ae3d' // #f9ae3d
    86. 			},
    87. 			cancelColor: { // 取消按钮颜色
    88. 				type: String,
    89. 				default: '' // #757575
    90. 			},
    91. 			titleColor: { // 标题颜色
    92. 				type: String,
    93. 				default: '' // #757575
    94. 			},
    95. 			currentIcon: { // 展开时候的ic
    96. 				type: String,
    97. 				default: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFEAAABRCAYAAACqj0o2AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MEQ0QTM0MzQ1Q0RBMTFFOUE0MjY4NzI1Njc1RjI1ODIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MEQ0QTM0MzU1Q0RBMTFFOUE0MjY4NzI1Njc1RjI1ODIiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDowRDRBMzQzMjVDREExMUU5QTQyNjg3MjU2NzVGMjU4MiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDowRDRBMzQzMzVDREExMUU5QTQyNjg3MjU2NzVGMjU4MiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PidwepsAAAK0SURBVHja7JxbTsJAFIYHww7ciStgCeoGvGxAiOsgURegoL5720AXYLiIr0aJviq3Zx3PhIEnKG3ndtr+f3KixrSUj/ZjzjClIqUUiFm2gAAQAREQEUAEREAERAQQAREQAREBREAEREBEEqa67h9RFDWllDv0awWYlqlQHmu1WjMRRMoV1QFttA12y3xRtdNczq8EsE4/f8FumX2q77ROvNXk8UGMEKdUz6tYJHljaZAbuyUH+UR1to5BEohTuqwPCeS4pAA/qY6o/kyHOAMCeRK3owJnj+rH1jjxhqpVsstaebCz6TmnHWyXyY+xHjSBWBY/bvSgadtXBj9u9KCN3rnIfkzkQVsTEEX0Y2IP2oKo/HhMICcFAThUcwVZNGU6FdbX/XURzkbVF4+ybGhjPrFdgP66QdXNurGtSdk6Xdb9nAJ8oDo3OQlsQZzkdPw41ONBo6vI5scDefRjZg+6gpg3Pxp50CXEvPjR2IOuIXL3oxUPuobI3Y9WPOgDIlc/WvOgL4iL/vqFCcD7LH0xB4hj7cfQ/fWH9qCT+FhG0tN+DBk1PzjOM0SVllixcsBT1AvYc/kAPhc0hRg/3uvxoCgKRN9+dOrBUBB9+9GpB0NC9OVH5x4MDdG1H714kANEV3705kEOEBf9dcPi/lQnsuvLg1wgSu3Ha0v7Uh4MMgUXeuG71H407a+VBy9CPQkOdw+MtB+nGbd/D+FBbhBNxo9SjwcngJjNj0E9yBFiFj8G9SBXiGn8GNyDnCEm8SMLD3KHGOdHNh7kDjHOj2w8mAeIi/5arX+c6b/fxHz9oADEdGdjR/fXCw/OOB5oVfCOgnepz8IB14PMw03jCmTE+QBx5z0gAmKSqK9OUF+hcAeIhu/QYr4Qie8rjW83hhMBERARQAREQAREBBABERCLnH8BBgA+TQI7U4t53AAAAABJRU5ErkJggg=='
    98. 			},
    99. 			defaultIcon: { // 折叠时候的ic
    100. 				type: String,
    101. 				default: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFEAAABRCAYAAACqj0o2AAACE0lEQVR4Xu3c200DMRCF4XEltJAOkEugA+ggpUAHoQMqiFMCdEAJUMEiS4mEELlIO7bPOeN9i6K1rG/952myyea1WiCtXmEuYBPR4RBMxInoIOCwhOtJLKVszWyXc/5y2BvNEq6I+/3+kFK6M7OHnPM7jcLKjbZAvD/uaZtzflm5P4rbWyJWgDcze1LPuzVihfxUz7sH4ilJ2bx7Isrm3RtRMu8RiHJ5j0SUyXs0okTeCIj0eSMh0uaNhkiZNyIiXd7IiDR5oyNS5M2ACJ83EyJs3myIkHkzIsLlzYwIkzc7IkTeCojD81ZCHJa3GuKQvBURu+etjNgtb3XELnlHQGyedyTEZnlHQ2ySd0RE97wjI7rlHR3RJe+JeIrbLOecD6ePpZQ6W1kn2epo4MUrPOKyLN8ppYq1+y1VStncOjIdGnFZlo+U0uOtWOeOY2TE12Ouq//pEA7xXL7XfvcufR8K0Svfv6CREN3yDYfYIt9QiK3yjYTYLF95xB75SiP2ylcZsVu+cogj8pVCHJWvEuKwfOkREfKlRkTJlxkRJl86RMR8qRBR82VChM0XHpEhX2hElnyREWnyhUNkzBcKkTVfJETafIcjKuQ7FFEl35GIMvl2R1TMtyuiar49EWXzbY5oZpv/hibXTF2h3+s60FRKeT6+3TjMS3nrA3ZFRD8xrfY3ER1kJ+JEdBBwWGKeRAfEH1wS5WFZSDB/AAAAAElFTkSuQmCC'
    102. 			},
    103. 			lastIcon: { // 没有子集的ic
    104. 				type: String,
    105. 				default: ''
    106. 			},
    107. 			border: { // 是否有分割线
    108. 				type: Boolean,
    109. 				default: false
    110. 			},
    111. 		},
    112. 		data() {
    113. 			return {
    114. 				showTree: false,
    115. 				treeList: [],
    116. 				selectIndex: -1,
    117. 				childNums: [],
    118. 				rt:[],
    119. 				rtName:[]
    120. 			}
    121. 		},
    122. 		computed: {},
    123. 		methods: {
    124. 			_show() {
    125. 				this.showTree = true
    126. 			},
    127. 			_hide() {
    128. 				this.showTree = false
    129. 			},
    130. 			_cancel() {
    131. 				this._hide()
    132. 				this.$emit("cancel", '');
    133. 			},
    134. 			_confirm() {
    135. 				this.rt=[];
    136. 				this.rtName=[];
    137. 				// 处理所选数据
    138. 				this.treeList.forEach((item, i) => {
    139. 					if(item.id==100&&item.checked){
    140. 						return this.confirmEach(this.treeData)
    141. 					}
    142. 					if (item.checked&&item.parentId&&item.parentId!="100") {
    143. 						this.rt.push(item.id)
    144. 						this.rtName.push(item.name)
    145. 					}
    146. 				})
    147. 				this._hide()
    148. 				this.$emit("confirm",  {id:this.rt,name:this.rtName});
    149. 			},
    150. 			confirmEach(list){
    151. 				list.forEach((item,index)=>{
    152. 					if(item.isDy){
    153. 						this.rtName.push(item.name)
    154. 						this.rt.push(item.id)
    155. 					}
    156. 					if(item.children&&item.children.length>0) this.confirmEach(item.children)
    157. 				})
    158. 			},
    159. 			//扁平化树结构
    160. 			_renderTreeList(list = [], rank = 0, parentId = [], parents = []) {
    161. 				list.forEach(item => {
    162. 					this.treeList.push({
    163. 						id: item[this.valueKey],
    164. 						name: item[this.labelKey],
    165. 						source: item,
    166. 						parentId, // 父级id数组
    167. 						parents, // 父级id数组
    168. 						rank, // 层级
    169. 						showChild: false, //子级是否显示
    170. 						open: false, //是否打开
    171. 						show: rank === 0, // 自身是否显示
    172. 						hideArr: [],
    173. 						orChecked: item.checked ? item.checked : false,
    174. 						checked: item.checked ? item.checked : false,
    175. 					})
    176. 					if (Array.isArray(item[this.childrenKey]) && item[this.childrenKey].length > 0) {
    177. 						// console.log(item)
    178. 						let parentid = [...parentId],
    179. 							parentArr = [...parents],
    180. 							childrenid = [];
    181. 						delete parentArr.children
    182. 						parentid.push(item[this.valueKey]);
    183. 						parentArr.push({
    184. 							[this.valueKey]: item[this.valueKey],
    185. 							[this.labelKey]: item[this.labelKey]
    186. 						})
    187. 						this._renderTreeList(item[this.childrenKey], rank + 1, parentid, parentArr);
    188. 					} else {
    189. 						this.treeList[this.treeList.length - 1].lastRank = true;
    190. 					}
    191. 				})
    192. 			},
    193. 			// 处理默认选择
    194. 			_defaultSelect() {
    195. 				this.treeList.forEach((v, i) => {
    196. 					if (v.checked) {
    197. 						this.treeList.forEach((v2, i2) => {
    198. 							if (v.parentId.toString().indexOf(v2.parentId.toString()) >= 0) {
    199. 								v2.show = true
    200. 								if (v.parentId.includes(v2.id)) {
    201. 									v2.showChild = true;
    202. 									v2.open = true;
    203. 								}
    204. 							}
    205. 						})
    206. 					}
    207. 				})
    208. 			},
    209. 			// 点击
    210. 			_treeItemTap(item, index) {
    211. 				if (item.lastRank === true) {
    212. 					//点击最后一级时触发事件
    213. 					this.treeList[index].checked = !this.treeList[index].checked
    214. 					this._fixMultiple(index)
    215. 					return;
    216. 				}
    217. 				let list = this.treeList;
    218. 				let id = item.id;
    219. 				item.showChild = !item.showChild;
    220. 				item.open = item.showChild ? true : !item.open;
    221. 				list.forEach((childItem, i) => {
    222. 					if (item.showChild === false) {
    223. 						//隐藏所有子级
    224. 						if (!childItem.parentId.includes(id)) {
    225. 							return;
    226. 						}
    227. 						if (!this.foldAll) {
    228. 							if (childItem.lastRank !== true && !childItem.open) {
    229. 								childItem.showChild = false;
    230. 							}
    231. 							// 为隐藏的内容添加一个标记
    232. 							if (childItem.show) {
    233. 								childItem.hideArr[item.rank] = id
    234. 							}
    235. 						} else {
    236. 							if (childItem.lastRank !== true) {
    237. 								childItem.showChild = false;
    238. 							}
    239. 						}
    240. 						childItem.show = false;
    241. 					} else {
    242. 						// 打开子集
    243. 						if (childItem.parentId[childItem.parentId.length - 1] === id) {
    244. 							childItem.show = true;
    245. 						}
    246. 						// 打开被隐藏的子集
    247. 						if (childItem.parentId.includes(id) && !this.foldAll) {
    248. 							// console.log(childItem.hideArr)
    249. 							if (childItem.hideArr[item.rank] === id) {
    250. 								childItem.show = true;
    251. 								if (childItem.open && childItem.showChild) {
    252. 									childItem.showChild = true
    253. 								} else {
    254. 									childItem.showChild = false
    255. 								}
    256. 								childItem.hideArr[item.rank] = null
    257. 							}
    258. 						}
    259. 					}
    260. 				})
    261. 			},
    262. 			_treeItemSelect(item, index) {
    263. 				this.treeList[index].checked = !this.treeList[index].checked
    264. 				// 选父级, 子级自动全选
    265. 				this.syncChecked(this.treeList, item.id, this.treeList[index].checked)
    266. 				if(item.rank > 0) {
    267. 					item.parentId.forEach((pid, indexP) => {
    268. 						const parent = this.treeList.filter(i => i.id === pid)
    269. 						const childNum = parent.length > 0 ? parent[0].childNum : 0
    270. 						if(this.childNums[pid] === undefined) {
    271. 							this.childNums[pid] = 1
    272. 						} else if(this.childNums[pid] < childNum) {
    273. 							this.childNums[pid]++
    274. 						}
    275. 					})
    276. 					//子级选择/选满/取消选择, 父级往上同步状态
    277. 					this.setAncestors(item.parentId, this.treeList[index].checked)
    278. 				}
    279. 				this._fixMultiple(index)
    280. 			},
    281. 			syncChecked (trees, pid, checked) {
    282. 				trees.forEach((item,index) => {
    283. 					if(item.parentId.includes(pid)) {
    284. 						this.treeList[index].checked = checked
    285. 						this.syncChecked(trees, item.id, checked)
    286. 					} else if(item.children !== undefined) {
    287. 						this.syncChecked(item.children, pid, checked)
    288. 					}
    289. 				})
    290. 			},
    291. 			setAncestors (pids, checked) {
    292. 				this.treeList.forEach((item,index) => {
    293. 					if(pids.includes(item.id)) {
    294. 						if(checked && this.childNums[item.id] !== undefined && item.childNum === this.childNums[item.id]) {
    295. 						// 子级全部选中, 父级才选中
    296. 							this.treeList[index].checked = true
    297. 						} else {
    298. 							this.treeList[index].checked = false
    299. 						}
    300. 						this.setAncestors(item.parentId, checked)
    301. 					} 
    302. 				})
    303. 			},
    304. 			// _treeItemSelect(item, index) {
    305. 			// 	this.treeList[index].checked = !this.treeList[index].checked
    306. 			// 	this._fixMultiple(index)
    307. 			// },
    308. 			// 处理单选多选
    309. 			_fixMultiple(index) {
    310. 				if (!this.multiple) {
    311. 					// 如果是单选
    312. 					this.treeList.forEach((v, i) => {
    313. 						if (i != index) {
    314. 							this.treeList[i].checked = false
    315. 						} else {
    316. 							this.treeList[i].checked = true
    317. 						}
    318. 					})
    319. 				}
    320. 			},
    321. 			// 重置数据
    322. 			_reTreeList() {
    323. 				this.treeList.forEach((v, i) => {
    324. 					this.treeList[i].checked = v.orChecked
    325. 				})
    326. 			},
    327. 			_initTree(treeData = this.treeData){
    328. 				this.treeList = [];
    329. 				this._renderTreeList(treeData);
    330. 				this.$nextTick(() => {
    331. 					this._defaultSelect(treeData)
    332. 				})
    333. 			}
    334. 		},
    335. 		mounted() {
    336. 			console.log('----------next-tree组件完成挂载demo------------')
    337. 			this._initTree();
    338. 			this.$watch(() => this.treeData, (list) => {
    339. 				this._initTree(list);
    340. 			}, {deep: true, immediate: true})
    341. 			this.$watch(() => [this.multiple, this.selectParent], () => {
    342. 				if (this.treeData.length) {
    343. 					this._reTreeList();
    344. 				}	
    345. 			}, {deep: true, immediate: true})
    346. 		}
    347. 	}
    348. </script>
    349.  
    350. <style scoped>
    351. 	@import "./style.css";
    352. </style>

    1. .next-tree-mask {
    2.   position: fixed;
    3.   top: 0rpx;
    4.   right: 0rpx;
    5.   bottom: 0rpx;
    6.   left: 0rpx;
    7.   z-index: 9998;
    8.   background-color: rgba(0, 0, 0, 0.6);
    9.   opacity: 0;
    10.   transition: all 0.3s ease;
    11.   visibility: hidden;
    12. }
    13. .next-tree-mask.show {
    14.   visibility: visible;
    15.   opacity: 1;
    16. }
    17. .next-tree-cnt {
    18.   position: fixed;
    19.   top: 0rpx;
    20.   right: 0rpx;
    21.   bottom: 0rpx;
    22.   left: 0rpx;
    23.   z-index: 9999;
    24.   top: 160rpx;
    25.   transition: all 0.3s ease;
    26.   transform: translateY(100%);
    27. }
    28. .next-tree-cnt.show {
    29.   transform: translateY(0);
    30. }
    31. .next-tree-bar {
    32.   background-color: #fff;
    33.   height: 72rpx;
    34.   padding-left: 20rpx;
    35.   padding-right: 20rpx;
    36.   display: flex;
    37.   justify-content: space-between;
    38.   align-items: center;
    39.   box-sizing: border-box;
    40.   border-bottom-width: 1rpx !important;
    41.   border-bottom-style: solid;
    42.   border-bottom-color: #f5f5f5;
    43.   font-size: 32rpx;
    44.   color: #757575;
    45.   line-height: 1;
    46. }
    47. .next-tree-bar-confirm {
    48.   color: #f9ae3d;
    49. }
    50. .next-tree-view {
    51.   position: absolute;
    52.   top: 0rpx;
    53.   right: 0rpx;
    54.   bottom: 0rpx;
    55.   left: 0rpx;
    56.   top: 72rpx;
    57.   background-color: #fff;
    58.   padding-top: 20rpx;
    59.   padding-right: 20rpx;
    60.   padding-bottom: 20rpx;
    61.   padding-left: 20rpx;
    62. }
    63. .next-tree-view-sc {
    64.   height: 100%;
    65.   overflow: hidden;
    66. }
    67. .next-tree-item {
    68.   display: flex;
    69.   justify-content: space-between;
    70.   align-items: center;
    71.   font-size: 26rpx;
    72.   color: #757575;
    73.   line-height: 1;
    74.   height: 0;
    75.   opacity: 0;
    76.   transition: 0.2s;
    77.   position: relative;
    78.   overflow: hidden;
    79. }
    80. .next-tree-item.show {
    81.   height: 80rpx;
    82.   opacity: 1;
    83. }
    84. .next-tree-item.showchild:before {
    85.   transform: rotate(90deg);
    86. }
    87. .next-tree-item.border {
    88.   border-bottom: 1rpx solid rgba(204,204,204,0.2);
    89. }
    90. .next-tree-item.last:before {
    91.   opacity: 0;
    92. }
    93. .next-tree-icon {
    94.   width: 26rpx;
    95.   height: 26rpx;
    96.   margin-right: 8rpx;
    97. }
    98. .next-tree-label {
    99.   flex: 1;
    100.   display: flex;
    101.   align-items: center;
    102.   height: 100%;
    103.   line-height: 1.2;
    104. }
    105. .next-tree-check {
    106.   width: 40px;
    107.   height: 40px;
    108.   display: flex;
    109.   justify-content: center;
    110.   align-items: center;
    111. }
    112. .next-tree-check-yes,
    113. .next-tree-check-no {
    114.   width: 20px;
    115.   height: 20px;
    116.   border-top-left-radius: 20%;
    117.   border-top-right-radius: 20%;
    118.   border-bottom-right-radius: 20%;
    119.   border-bottom-left-radius: 20%;
    120.   border-top-width: 1rpx;
    121.   border-left-width: 1rpx;
    122.   border-bottom-width: 1rpx;
    123.   border-right-width: 1rpx;
    124.   border-style: solid;
    125.   border-color: #f9ae3d;
    126.   display: flex;
    127.   justify-content: center;
    128.   align-items: center;
    129.   box-sizing: border-box;
    130. }
    131. .next-tree-check-yes-b {
    132.   border-top-left-radius: 20%;
    133.   border-top-right-radius: 20%;
    134.   border-bottom-right-radius: 20%;
    135.   border-bottom-left-radius: 20%;
    136.   background-color: #f9ae3d;
    137. 	color: #fff;
    138. }
    139. .next-tree-check-yes-b .icon-text {
    140. 	font-size: 14px;
    141. 	font-weight: normal;
    142. 	font-family: uicon-iconfont;
    143. 	display: flex;
    144. 	flex-direction: row;
    145. 	align-items: center;
    146. }
    147. .next-tree-check .radio {
    148.   border-top-left-radius: 50%;
    149.   border-top-right-radius: 50%;
    150.   border-bottom-right-radius: 50%;
    151.   border-bottom-left-radius: 50%;
    152. }
    153. .next-tree-check .radio .next-tree-check-yes-b {
    154.   border-top-left-radius: 50%;
    155.   border-top-right-radius: 50%;
    156.   border-bottom-right-radius: 50%;
    157.   border-bottom-left-radius: 50%;
    158. }
    159. .hover-c {
    160.   opacity: 0.6;
    161. }

     参数配置：

    dataListArray[]数据源
    idKeyStringid显示的主键key值
    nameKeyStringname显示的名字key值
    phoneKeyStringphone显示的电话key值
    imgKeyStringimg显示的头像key值
    radiusNumber4rpx头像圆角(rpx、px、%)
    showAvatarBooleantrue是否显示头像
    isInterlockBooleanfalse是否双向联动
    事件名说明类型回调参数
    itemclick菜单项item点击事件emitObject

     页面使用：

    1. <next-tree ref="qiantree" :selectParent="true" labelKey="name" valueKey="id" 
    2. 	:multiple="true" :treeData="rangeList" 
    3. 	@confirm="onconfirm" />
    4.  
    5.  
    6. import nextTree from '../components/next-tree/next-tree.vue'
    7. components: {
    8. 	nextTree
    9. },
    10. 	
    11.  
    12. <next-tree ref="qiantree" :selectParent="true" labelKey="name" valueKey="id" 
    13. 	:multiple="true" :treeData="rangeList" 
    14.    @confirm="onconfirm" />
    15.  
    16.  
    17.  
    18. onconfirm(list) {
    19. 	console.log('选中项的数量列表list：', list)	
    20. },

    数据格式 

  • 相关阅读:
    hive-学习微博日志分析
    MPI简谈
    如何用一行CSS实现10种现代布局
    大厂永恒敲门砖——Android 系统启动流程详解
    Unity ToLua热更框架使用教程（1）
    OSG如何生成帮助文档
    华为机试真题 Java 实现【模拟商场优惠打折】【2022.11 Q4 新题】
    如何找出最优的【SVC】核函数和参数值—以乳腺癌数据集为例
    在线等！！！新版考纲在国内通过率有多少？
    Java并发常见面试题（一）
  • 原文地址：https://blog.csdn.net/qq_42717015/article/details/131930530