uniapp 微信小程序用 tki-tree实现选择人员组件、选择部门组件源码

已于 2024-11-19 14:52:20 修改
阅读量523 收藏 1
点赞数 8
文章标签： uni-app java 数据库
于 2024-11-18 14:46:28 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_46591612/article/details/143856708
版权 
<template>
	<view style="padding: 20rpx;">
		<uni-forms ref="form" :rules="dynamicRules" :label-width="150" label-position="top" :modelValue="form">
			<uni-forms-item label="姓名" required name="displayname">
				<uni-easyinput class="my-easyinput" v-model="form.displayname" placeholder="请输入姓名"
					disabled></uni-easyinput>
			</uni-forms-item>

			<uni-forms-item label="头像" required>
				<uni-file-picker :limit="1" :value="imgUrl" file-mediatype="image" @delete="deleteimgUrl"
					@select="selectimgUrl"></uni-file-picker>
			</uni-forms-item>
			<uni-forms-item label="职务" required name="extensionAttribute1">
				<uni-easyinput class="uni-mt-5" v-model="form.extensionAttribute1" placeholder="请输入职务"></uni-easyinput>
			</uni-forms-item>
			<uni-forms-item label="手机号码" required name="mobile">
				<uni-easyinput class="uni-mt-5" maxlength="11" v-model="form.mobile"
					placeholder="请输入手机号码"></uni-easyinput>
			</uni-forms-item>

			<uni-forms-item label="归属部门" required name="deptName">
				<uni-easyinput class="uni-mt-5" suffixIcon="search" v-model="form.deptName" disabled
					placeholder="请选择归属部门" @iconClick="icontreeDeptClick"></uni-easyinput>
			</uni-forms-item>
			<uni-forms-item label="邮箱" required name="mail">
				<uni-easyinput class="uni-mt-5" v-model="form.mail" placeholder="请输入邮箱"></uni-easyinput>
			</uni-forms-item>
			<view style="color: red;">
				注：填写位置和经纬度时，为了更精准实现一键导航功能，请用电脑端手动访问https://lbs.qq.com/getPoint
				<view style="color: blue;" @click="cope('https://lbs.qq.com/getPoint')">点击一键复制网址</view>
			</view>
			<uni-forms-item label="位置" required name="address">
				<uni-easyinput class="uni-mt-5" v-model="form.address" placeholder="请输入位置"></uni-easyinput>

			</uni-forms-item>

			<uni-forms-item label="经度" required name="lon">
				<uni-easyinput class="uni-mt-5" v-model="form.lon" placeholder="请输入经度"></uni-easyinput>
			</uni-forms-item>
			<uni-forms-item label="纬度" required name="lat">
				<uni-easyinput class="uni-mt-5" v-model="form.lat" placeholder="请输入纬度"></uni-easyinput>
			</uni-forms-item>



		</uni-forms>
		<button class="button" type="primary" :loading="loading"
			@click="$noMultipleClicks(updateInfomation)">确定</button>


		<tki-tree ref="tkitreeDept" border :selectParent="false" :range="reportingDepartment" title="选择归属部门"
			@confirm="selectDept" rangeKey="label" confirmColor="#4e8af7" />
	</view>
</template>
<script>
	import tkiTree from "@/components/tki-tree/tki-tree.vue"
	import {
		uploadAvatar,
		deptTreeSelect,
		editUser,
		findEditUserByOaAccount
	} from "@/api/login"
	import {
		encryptDes,
		decryptDes
	} from '@/utils/des.js' // 引用具体的方法

	const secretKey = '196cfafbfdbd11a1ddf41bcc03400a7c';
	const secretKey2 = 'xSr2ZMI6ttJ2aZlC4mOOUfqwwFa7S4CqNLgKx8rHuNEyMPMxFNGASuJzu0KE6fn5CwsNBbIdewVWhUHAuctLpg==';
	import config from '@/config'
	export default {
		components: {
			tkiTree
		},
		data() {
			return {
				noClick: true,
				baseUrl: config.baseUrl,
				reportingDepartment: [],
				imgUrl: [],
				loading: false,
				resultuser: {},
				form: {
					extensionAttribute1: "",
					mail: "",
					displayname: "",
					address: "",
					lon: "",
					lat: "",
					mobile: "",
					deptId: "",
					deptName: "",
					avatar: null

				},
				dynamicRules: {
					displayname: {
						rules: [{
							required: true,
							errorMessage: '请输入姓名',
						}]
					},
					mobile: {
						rules: [{
							required: true,
							errorMessage: '请输入手机号',
						}]
					},
					extensionAttribute1: {
						rules: [{
							required: true,
							errorMessage: '请输入职位',
						}]
					},
					deptId: {
						rules: [{
							required: true,
							errorMessage: '请输入部门',
						}]
					},
					mail: {
						rules: [{
							required: true,
							errorMessage: '请输入邮箱',
						}]
					},
					address: {
						rules: [{
							required: true,
							errorMessage: '请输入位置',
						}]
					},
					lon: {
						rules: [{
							required: true,
							errorMessage: '请输入经度',
						}]
					},
					lat: {
						rules: [{
							required: true,
							errorMessage: '请输入纬度',
						}]
					},
				}

			}
		},
		onLoad(e) {

			let a = decryptDes(secretKey2, secretKey)
			this.loginTime = encryptDes(e.loginTime, a)
			this.oaAccount = e.oaAccount
			this.findEditUserByOaAccount()

			this.deptTreeSelect()
		},
		methods: {

			findEditUserByOaAccount() {
				uni.showLoading({
					title: '加载中',
					mask: true

				});
				findEditUserByOaAccount({
					oaAccount: this.oaAccount,
					loginTime: this.loginTime,
					openId: uni.getStorageSync("openId")
				}).then((res) => {
					this.resultuser = res.data
					this.form.deptId = this.resultuser.deptcode
					this.form.deptName = this.resultuser.deptlist

					// this.form.avatar = this.resultuser.avatar

					this.imgUrl.push({
						url: 'data:image/png;base64,' + this.resultuser.avatar
					})
					this.form.displayname = this.resultuser.displayname
					this.form.extensionAttribute1 = this.resultuser.extensionattribute1
					this.form.mobile = this.resultuser.mobile
					this.form.mail = this.resultuser.mail
					this.form.address = this.resultuser.location.location

					this.form.lon = this.resultuser.location.lon
					this.form.lat = this.resultuser.location.lat
					this.form.id = this.resultuser.id

					this.$nextTick(() => {
						uni.hideLoading()
					})

				});
			},
			deptTreeSelect() {
				deptTreeSelect({
					oaAccount: this.oaAccount,
					loginTime: this.loginTime
				}).then((response) => {
					this.reportingDepartment = response.data;
				});

			},
			selectDept(e) {
				if (!e[0].parents) {
					this.form.deptId = e[0].id
					this.form.deptName = e[0].label;

				} else {
					let deptName = ""
					e[0].parents.forEach((item) => {
						deptName += item.label + '/'

					})
					this.form.deptName = deptName + e[0].label
				}
			},
			// 一键复制
			cope(text) {
				uni.setClipboardData({
					data: text,
					success: () => {
						uni.showToast({
							title: '复制成功',
							icon: 'none'
						});
					},
					fail: (err) => {
						uni.showToast({
							title: '复制失败',
							icon: 'none'
						});
						console.error(err);
					}
				});
			},
			icontreeDeptClick() {
				this.$refs.tkitreeDept._show();
			},

			// 选中图片上传
			selectimgUrl(e) {

				const tempFilePaths = e.tempFilePaths;
				uni.showLoading({
						title: '上传中请稍后',
						mask: true
					}),
					uploadAvatar({
						loginTime: this.loginTime,
						oaAccount: this.oaAccount,
						filePath: tempFilePaths[0]

					}).then((res) => {
						if (res.code == 200) {
							this.form.avatar = '/api' + res.fileName

							this.imgUrl.push({
								url: this.baseUrl + res.fileName
							})
							uni.hideLoading()
						}
					})
			},

			deleteimgUrl() {
				this.imgUrl = [];
				this.form.avatar = null
			},

			// 确定修改按钮
			updateInfomation() {
				this.loading = true
				console.log(this.form, "this.form");
				let a = decryptDes(secretKey2, secretKey)
				let deptId = encryptDes(this.form.deptId, a)
				let extensionAttribute1 = encryptDes(this.form.extensionAttribute1, a)
				let mobile = encryptDes(this.form.mobile, a)
				let address = encryptDes(this.form.address, a)
				let mail = encryptDes(this.form.mail, a)
				let lon = encryptDes(this.form.lon, a)
				let lat = encryptDes(this.form.lat, a)
				let data = {}
				if (this.form.avatar == null) {
					data = {
						oaAccount: this.oaAccount,
						loginTime: this.loginTime,
						deptIdCipher: deptId,
						extensionAttribute1: extensionAttribute1,
						mobile: mobile,
						address: address,
						mail: mail,
						lon: lon,
						lat: lat,
						id: this.form.id
					}

				} else {
					let avatar = encryptDes(this.form.avatar, a)
					data = {
						oaAccount: this.oaAccount,
						loginTime: this.loginTime,
						deptIdCipher: deptId,
						extensionAttribute1: extensionAttribute1,
						mobile: mobile,
						address: address,
						mail: mail,
						lon: lon,
						lat: lat,
						id: this.form.id,
						avatar: avatar

					}

				}

				this.$refs.form.validate().then(res => {
					editUser(data).then((res) => {
						if (res.code == 200) {
							uni.showToast({
								title: '修改成功',
								icon: 'none'
							});
							let pages = getCurrentPages();
							let prevPage = pages[pages.length - 2]; //上一个页面
							//直接调用上一个页面的setData()方法，把数据存到上一个页面中去
							prevPage.setData({
								isRefresh: 1
							})

							setTimeout(() => {
								this.loading = false
								uni.navigateBack({
									delta: 1, //返回层数，2则上上页

								})
							}, 2000)

						} else {
							uni.showToast({
								title: '修改失败',
								icon: 'none'
							});
							this.loading = false
						}


					})
				}).catch(err => {
					setTimeout(() => {
						this.loading = false
					}, 2000)
				})

			}
		}
	}
</script>


<style lang="scss">
	page {
		background-color: #ffffff;
	}
    
	 // 修改禁用表单disabled默认颜色
	.is-disabled {
		background-color: #fff !important;
		color: #000 !important;
	}
</style>

tki-tree组件

<template>
	<view class="tki-tree">
		<view class="tki-tree-mask" :class="{'show':showTree}" @tap="_cancel"></view>
		<view class="tki-tree-cnt" :class="{'show':showTree}">
			<view class="tki-tree-bar">
				<view class="tki-tree-bar-cancel" :style="{'color':cancelColor}" hover-class="hover-c" @tap="_cancel">取消
				</view>
				<view class="tki-tree-bar-title" :style="{'color':titleColor}">{{title}}</view>
				<view class="tki-tree-bar-confirm" :style="{'color':confirmColor}" hover-class="hover-c"
					@tap="_confirm">确定</view>
			</view>
			<view class="tki-tree-view">
				<scroll-view class="tki-tree-view-sc" :scroll-y="true">
					<block v-for="(item, index) in treeList" :key="index">
						<view class="tki-tree-item" :style="[{
							paddingLeft: item.rank*15 + 'px',
							zIndex: item.rank*-1 +50
						}]" :class="{
							border: border === true,
							show: item.show,
							last: item.lastRank,
							showchild: item.showChild,
							open: item.open,
						}">
							<view class="tki-tree-label" @tap.stop="_treeItemTap(item, index)">
								<image class="tki-tree-icon"
									:src="item.lastRank ? lastIcon : item.showChild ? currentIcon : defaultIcon">
								</image>
								{{item.name}}
							</view>
							<view class="tki-tree-check" @tap.stop="_treeItemSelect(item, index)"
								v-if="selectParent?true:item.lastRank">
								<view class="tki-tree-check-yes" v-if="item.checked" :class="{'radio':!multiple}"
									:style="{'border-color':confirmColor}">
									<view class="tki-tree-check-yes-b" :style="{'background-color':confirmColor}">
									</view>
								</view>
								<view class="tki-tree-check-no" v-else :class="{'radio':!multiple}"
									:style="{'border-color':confirmColor}"></view>
							</view>
						</view>
					</block>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "tki-tree",
		props: {
			range: {
				type: Array,
				default: function() {
					return []
				}
			},
			idKey: {
				type: String,
				default: 'id'
			},
			rangeKey: {
				type: String,
				default: 'label'
			},
			title: {
				type: String,
				default: ''
			},
			multiple: { // 是否可以多选
				type: Boolean,
				default: false
				// default: true
			},
			selectParent: { //是否可以选父级
				type: Boolean,
				default: false
			},
			foldAll: { //折叠时关闭所有已经打开的子集，再次打开时需要一级一级打开
				type: Boolean,
				default: false
			},
			confirmColor: { // 确定按钮颜色
				type: String,
				default: '' // #07bb07
			},
			cancelColor: { // 取消按钮颜色
				type: String,
				default: '' // #757575
			},
			titleColor: { // 标题颜色
				type: String,
				default: '' // #757575
			},
			currentIcon: { // 展开时候的ic
				type: String,
				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=='
			},
			defaultIcon: { // 折叠时候的ic
				type: String,
				default: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFEAAABRCAYAAACqj0o2AAACE0lEQVR4Xu3c200DMRCF4XEltJAOkEugA+ggpUAHoQMqiFMCdEAJUMEiS4mEELlIO7bPOeN9i6K1rG/952myyea1WiCtXmEuYBPR4RBMxInoIOCwhOtJLKVszWyXc/5y2BvNEq6I+/3+kFK6M7OHnPM7jcLKjbZAvD/uaZtzflm5P4rbWyJWgDcze1LPuzVihfxUz7sH4ilJ2bx7Isrm3RtRMu8RiHJ5j0SUyXs0okTeCIj0eSMh0uaNhkiZNyIiXd7IiDR5oyNS5M2ACJ83EyJs3myIkHkzIsLlzYwIkzc7IkTeCojD81ZCHJa3GuKQvBURu+etjNgtb3XELnlHQGyedyTEZnlHQ2ySd0RE97wjI7rlHR3RJe+JeIrbLOecD6ePpZQ6W1kn2epo4MUrPOKyLN8ppYq1+y1VStncOjIdGnFZlo+U0uOtWOeOY2TE12Ouq//pEA7xXL7XfvcufR8K0Svfv6CREN3yDYfYIt9QiK3yjYTYLF95xB75SiP2ylcZsVu+cogj8pVCHJWvEuKwfOkREfKlRkTJlxkRJl86RMR8qRBR82VChM0XHpEhX2hElnyREWnyhUNkzBcKkTVfJETafIcjKuQ7FFEl35GIMvl2R1TMtyuiar49EWXzbY5oZpv/hibXTF2h3+s60FRKeT6+3TjMS3nrA3ZFRD8xrfY3ER1kJ+JEdBBwWGKeRAfEH1wS5WFZSDB/AAAAAElFTkSuQmCC'
			},
			lastIcon: { // 没有子集的ic
				type: String,
				default: require("@/static/assets/images/class.png")
			},
			border: { // 是否有分割线
				type: Boolean,
				default: false
			},
		},
		data() {
			return {
				showTree: false,
				treeList: [],
				selectIndex: -1,
			}
		},
		computed: {},
		methods: {
			_show() {
				this.showTree = true
			},
			_hide() {
				this.showTree = false
			},
			_cancel() {
				this._hide()
				this.$emit("cancel", '');
			},
			_confirm() {
				// 处理所选数据
				let rt = [],
					obj = {};
				this.treeList.forEach((v, i) => {
					if (this.treeList[i].checked) {
						obj = {}
						obj.parents = this.treeList[i].parents
						obj = Object.assign(obj, this.treeList[i].source)
						// 移除子元素
						delete obj.children
						rt.push(obj)
					}
				})
				this._hide()
				this.$emit("confirm", rt);
			},
			//扁平化树结构
			_renderTreeList(list = [], rank = 0, parentId = [], parents = []) {
				list.forEach(item => {
					this.treeList.push({
						id: item[this.idKey],
						name: item[this.rangeKey],
						source: item,
						parentId, // 父级id数组
						parents, // 父级id数组
						rank, // 层级
						showChild: false, //子级是否显示
						open: false, //是否打开
						show: rank === 0, // 自身是否显示
						hideArr: [],
						orChecked: item.checked ? item.checked : false,
						checked: item.checked ? item.checked : false,
					})
					if (Array.isArray(item.children) && item.children.length > 0) {
						// console.log(item)
						let parentid = [...parentId],
							parentArr = [...parents],
							childrenid = [...childrenid];
						delete parentArr.children
						parentid.push(item[this.idKey]);
						parentArr.push({
							[this.idKey]: item[this.idKey],
							[this.rangeKey]: item[this.rangeKey]
						})
						this._renderTreeList(item.children, rank + 1, parentid, parentArr);
					} else {
						this.treeList[this.treeList.length - 1].lastRank = true;
					}
				})
				// console.log(list)
			},
			// 处理默认选择
			_defaultSelect() {
				this.treeList.forEach((v, i) => {
					if (v.checked) {
						this.treeList.forEach((v2, i2) => {
							if (v.parentId.toString().indexOf(v2.parentId.toString()) >= 0) {
								v2.show = true
								if (v.parentId.includes(v2.id)) {
									v2.showChild = true;
									v2.open = true;
								}
							}
						})
					}
				})
			},
			// 点击
			_treeItemTap(item, index) {
				if (item.lastRank === true) {
					//点击最后一级时触发事件
					this.treeList[index].checked = !this.treeList[index].checked
					this._fixMultiple(index)
					return;
				}
				let list = this.treeList;
				let id = item.id;
				item.showChild = !item.showChild;
				item.open = item.showChild ? true : !item.open;
				list.forEach((childItem, i) => {
					if (item.showChild === false) {
						//隐藏所有子级
						if (!childItem.parentId.includes(id)) {
							return;
						}
						if (!this.foldAll) {
							if (childItem.lastRank !== true && !childItem.open) {
								childItem.showChild = false;
							}
							// 为隐藏的内容添加一个标记
							if (childItem.show) {
								childItem.hideArr[item.rank] = id
							}
						} else {
							if (childItem.lastRank !== true) {
								childItem.showChild = false;
							}
						}
						childItem.show = false;
					} else {
						// 打开子集
						if (childItem.parentId[childItem.parentId.length - 1] === id) {
							childItem.show = true;
						}
						// 打开被隐藏的子集
						if (childItem.parentId.includes(id) && !this.foldAll) {
							// console.log(childItem.hideArr)
							if (childItem.hideArr[item.rank] === id) {
								childItem.show = true;
								if (childItem.open && childItem.showChild) {
									childItem.showChild = true
								} else {
									childItem.showChild = false
								}
								childItem.hideArr[item.rank] = null
							}
							// console.log(childItem.hideArr)
						}
					}
				})
				// console.log(this.treeList)
			},
			_treeItemSelect(item, index) {
				this.treeList[index].checked = !this.treeList[index].checked
				this._fixMultiple(index)
			},
			// 处理单选多选
			_fixMultiple(index) {
				if (!this.multiple) {
					// 如果是单选
					this.treeList.forEach((v, i) => {
						if (i != index) {
							this.treeList[i].checked = false
						} else {
							this.treeList[i].checked = true
						}
					})
				}
			},
			// 重置数据
			_reTreeList() {
				this.treeList.forEach((v, i) => {
					this.treeList[i].checked = v.orChecked
				})
			},
			_initTree(range = this.range) {
				this.treeList = [];
				this._renderTreeList(range);
				this.$nextTick(() => {
					this._defaultSelect(range)
				})
			}
		},
		watch: {
			range(list) {
				this._initTree(list);
			},
			multiple() {
				if (this.range.length) {
					this._reTreeList();
				}
			},
			selectParent() {
				if (this.range.length) {
					this._reTreeList();
				}
			},
		},
		mounted() {
			this._initTree();
		}
	}
</script>

<style scoped>
	@import "./style.css";
</style>

style.css源码

.tki-tree-mask {
  position: fixed;
  top: 0rpx;
  right: 0rpx;
  bottom: 0rpx;
  left: 0rpx;
  z-index: 9998;
  background-color: rgba(0, 0, 0, 0.6);
  opacity: 0;
  transition: all 0.3s ease;
  visibility: hidden;
}
.tki-tree-mask.show {
  visibility: visible;
  opacity: 1;
}
.tki-tree-cnt {
  position: fixed;
  top: 0rpx;
  right: 0rpx;
  bottom: 0rpx;
  left: 0rpx;
  z-index: 9999;
  top: 160rpx;
  transition: all 0.3s ease;
  transform: translateY(100%);
}
.tki-tree-cnt.show {
  transform: translateY(0);
}
.tki-tree-bar {
  background-color: #fff;
  height: 72rpx;
  padding-left: 20rpx;
  padding-right: 20rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  border-bottom-width: 1rpx !important;
  border-bottom-style: solid;
  border-bottom-color: #f5f5f5;
  font-size: 32rpx;
  color: #757575;
  line-height: 1;
}
.tki-tree-bar-confirm {
  color: #07bb07;
}
.tki-tree-view {
  position: absolute;
  top: 0rpx;
  right: 0rpx;
  bottom: 0rpx;
  left: 0rpx;
  top: 72rpx;
  background-color: #fff;
  padding-top: 20rpx;
  padding-right: 20rpx;
  padding-bottom: 20rpx;
  padding-left: 20rpx;
}
.tki-tree-view-sc {
  height: 100%;
  overflow: hidden;
}
.tki-tree-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 26rpx;
  color: #757575;
  line-height: 1;
  height: 0;
  opacity: 0;
  transition: 0.2s;
  position: relative;
  overflow: hidden;
}
.tki-tree-item.show {
  height: 80rpx;
  opacity: 1;
}
.tki-tree-item.showchild:before {
  transform: rotate(90deg);
}
.tki-tree-item.last:before {
  opacity: 0;
}
.tki-tree-icon {
  width: 26rpx;
  height: 26rpx;
  margin-right: 8rpx;
}
.tki-tree-label {
  flex: 1;
  display: flex;
  align-items: center;
  height: 100%;
  line-height: 1.2;
}
.tki-tree-check {
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.tki-tree-check-yes,
.tki-tree-check-no {
  width: 20px;
  height: 20px;
  border-top-left-radius: 20%;
  border-top-right-radius: 20%;
  border-bottom-right-radius: 20%;
  border-bottom-left-radius: 20%;
  border-top-width: 1rpx;
  border-left-width: 1rpx;
  border-bottom-width: 1rpx;
  border-right-width: 1rpx;
  border-style: solid;
  border-color: #07bb07;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}
.tki-tree-check-yes-b {
  width: 12px;
  height: 12px;
  border-top-left-radius: 20%;
  border-top-right-radius: 20%;
  border-bottom-right-radius: 20%;
  border-bottom-left-radius: 20%;
  background-color: #07bb07;
}
.tki-tree-check .radio {
  border-top-left-radius: 50%;
  border-top-right-radius: 50%;
  border-bottom-right-radius: 50%;
  border-bottom-left-radius: 50%;
}
.tki-tree-check .radio .tki-tree-check-yes-b {
  border-top-left-radius: 50%;
  border-top-right-radius: 50%;
  border-bottom-right-radius: 50%;
  border-bottom-left-radius: 50%;
}
.hover-c {
  opacity: 0.6;
}

吴登峰super
关注
uni-app - 详细实现树形结构选择器组件（支持单选 / 多选 / 可选择父级 / 弹框形式）树形控件 tree 无限级节点树，树插件完整源码，最好用的组件教程
王二红
11-07 1万+
uni-app实现无限级树形结构组件，uniapp无限树形结构，uniapp无限级树形结构组件,多选组件,支持搜索，关于vue.js:uniapp如何实现无限级树形结构组件，uniapp无限级树形结构组件，多选组件，无限树状组件的实现，uni-app官方插件，最好用的树形结构three组件树，很好用的uni-app节点树组件教程，uni-app兼容H5app小程序的树形节点树插件组件，UNIAPP怎么实现树形解构可展开折叠的组件。uni-app-树形结构组件（支持展示、单选、多选、多选联动、展开折
安全红蓝对抗反制（反捕、画像）
墨痕诉清风的博客
03-09 3836
1.蜜罐 蜜罐可以理解成互联网上的一台主机，它的作用是诱骗攻击者去对自己进行攻击，然后记录攻击者的攻击细节并生成对应的攻击者画像，是当前的一种比较主流的入侵检测系统也是一种主动防御系统。 1.1 放置高交互蜜罐 放置高交互蜜罐，例如一个邮箱服务类型的蜜罐，攻击者有可能会进行邮箱注册，这样子攻击者就主动向我们留下了自己的身份信息。 1.2 放置多个容易被发现的蜜罐 放置多个攻击者可以轻而易举发现的蜜罐，攻击者就会知道自己所在的环境是被蜜罐所包围的，有可能就会放弃进行大范围攻击，变相保护了蜜罐背后的真
uniapp 如何使用 tki-tree树形选择器，可支持增强版，支持多选、单选、父级选择，Picker形式等等
weixin_46212682的博客
06-15 3777
uniapp 如何使用 tki-tree树形选择器，可支持增强版，支持多选、单选、父级选择，Picker形式等等
Uniapp树选择组件
fsfsddsfsfwe的博客
05-31 1337
【代码】Uniapp树选择组件。
小程序 选择树组件 可绑定 可搜索 可配置 可勾选
最新发布
Wuququ的博客
03-09 576
​小程序 开发一个选择树组件（仿照钉钉组织架构的实现）
uniapp中的picker选择器
热门推荐
叶落无痕的博客
10-01 2万+
array: [{ name: '中国' }, { name: '美国' }, { name: '巴西' }, { name: '日本' }],this.multiArray[2] = ['北京', '上海', '广州'];multiArray: [['亚洲', '欧洲'], ['中国', '日本'], ['北京', '上海', '广州']],this.multiArray[2] = ['北京', '上海', '广州'];this.multiArray[1] = ['中国', '日本'];
uniapp 树形结构选择器
weixin_53561783的博客
02-01 4598
改造，可以实现多选或者单选，我上面示例为单选，上面的tab导航头是可以点击回退的，这个插件的优势在于，正常的树形结构的数据非常多，移动端拉取数据太多或导致页面卡顿，我用了好几款插件体验度都不是很友好，这款插件它是一个新的路由页面不同一般的弹窗页面类似，能很好的避免页面卡顿，第一次加载过长的问题，因为我是一个单独的页面，防止遗漏我会把我的全部页面功能全部贴出来，有的和组件无关的，需要自己手动删除一下。查看项目目录uni_modules 下面是否有相对于的导入的包文件。前往插件市场导入完整插件包代码。
uniapp树组件优化 树节点设置单选，单击单选框可以选中多个 偶尔根节点点击后会隐藏整棵树
weixin_45631278的博客
11-29 1050
uniapp树组件优化 树节点设置单选，单击单选框可以选中多个 偶尔根节点点击后会隐藏整棵树
uni-app tree(树状) 组件
qq_42717015的博客
09-13 1万+
uni-app tree(树状) 组件
uniapp的树形选择器，tki-tree组件
Blue54的博客
03-21 1万+
根据：树形选择器增强版，支持多选、单选、父级选择，Picker形式 - DCloud 插件市场 树形选择器：使用tki-tree组件： 先导入并注册组件： 在javascript中：export default外放import，在export default内data外放注册components import tkiTree from "@/commons/tki-tree/tki-tree.vue" components: { tkiTree, }, 在template中写：
uniapp 树形层级选择器插件 ba-tree-picker
三杯五岳
06-30 9005
uniapp树形层级选择器插件，使用的picker弹窗形式的，样式和比例参照uniapp的picker和uni-data-picker组件 * 支持单选、多选、父级选择 * 支持Object对象属性自定义映射 * 支持显示全部选中、部分选中、未选中三种状态 * 支持快速自定义简单样式（分割线、按钮、标题等），深入样式可复写css.........
python 小程序 投票 刷票,python 小程序 自动操作
2401_85415768的博客
06-08 869
大家好，小编来为大家解答以下问题，python 小程序 投票 刷票，python 小程序 自动操作，现在让我们一起来看看吧！
很好用的uni-app节点树组件！
06-23
很好用的uni-app节点树组件！
ios学习资源
fishmai的专栏
05-15 1万+
問：學習Objective-C的書籍？答：Effective objective-C 2.0编写高质量ios和OS X代码的52个有效方法Learn Objective–C on the Mac by Mark Dalrymple and Scott Knaster, Apress.這本的內容是Objective-C跟一些基本的Cocoa Foundation Framework，是學習Obj...
基于云开发 CloudBase 搭建在线视频会议应用教程
TCB_CloudBase的博客
11-17 1072
基于云开发 CloudBase 搭建在线视频会议应用 在线视频会议应用是基于浏览器的能力 WebRTC 以及 腾讯云开发 CloudBase 能力构建而成的应用. 在云开发的助力下, 一个复杂的在线会议应用, 一个人一两天即可完成. 云开发CloudBase开通，参加：https://console.cloud.tencent.com/tcb?tdl_anchor=techsite 在线体验 Demo 应用体验地址: Online Meeting Powered by Tencent Cloudbase .
uni-app-使用tkiTree组件实现树形结构选择(​自定义组件 components/tki-tree/tki-tree 建议移动到子包 subpkg 内)
路虽远行则将至，事虽难做则必成。
08-04 4127
在实际开发中我们经常遇见树结构-比如楼层区域-组织架构-部门岗位-系统类型等情况往往需要把这个树结构当成条件来查询数据，在PC端可以使用Tree，table，Treeselect等组件展示在uni-app的内置组件中似乎没有提供这样组件来展示，但是是有第三方包tkiTree组件来解决这个问题我是基本使用，通过确认之后传递id和name形式来使用，据说深层次使用会有很多bug（需要自己尝试）
uni-app树形列表（单选，多选）tree树组件（利用市场插件），记录使用方法
lanbaiyans的博客
04-10 6137
uni-app树形列表（单选，多选）tree树组件（利用市场插件），记录使用方法
uniapp 树形组件、机构选择组件、部门选择组件、递归组件的简单实现。
记录自己的学习和工作心得，欢迎交流。
08-17 2572
uniapp 树形组件、机构选择组件、部门选择组件、递归组件的简单实现。
uniapp 小程序通过tkiTree实现树状结构选择
abc123abccc的博客
07-17 645
1.该组件需要通过插件市场下载引入，才能使用，引入以后，记得重启微信开发者工具。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值