js手写树形下拉

最新推荐文章于 2022-10-13 17:13:15 发布

大药小蓝

最新推荐文章于 2022-10-13 17:13:15 发布

阅读量574

点赞数

文章标签： javascript 开发语言前端 vue.js

本文链接：https://blog.csdn.net/qq_41919594/article/details/122083967

版权

1.js部分，给每个数据加上状态标识status默认false为关闭状态

studentMyWorkAttendanceRemote(this.semesterId, query).then(res => {
	this.listData = res.data
	this.topDetails.totalOnlineMinute = res.totalOnlineMinute
	for (var i in this.listData) {
		this.listData[i].status = false
		if (this.listData[i].children.length != 0) {
			for (var j in this.listData[i].children) {
				this.listData[i].children[j].status = false
			}
		}
	}
})

2.HTML部分，做了3级

<view class="" v-for="(item,index) in listData" :key='index' style="margin: 5upx;">
	<view class="" @click="clickChapt( item.chapterId,item.status )">
		<view class="zhangStyle">
			<view class="u-line-1" style="width: 80%;">
				{{ item.chapterName }}
			</view>
			<view :class="[item.status ? 'xuanzhuang' : '']">
				<image src="../../../static/image/zahngXiala.png" mode=""
					style="width: 15px;height: 15px;"></image>
			</view>
		</view>
		<view v-if="item.children != [] && item.status  ">
			<view v-for="(item1,index1) in item.children " :key="index1">
				<view class="" @click.stop="clickChapt1( item1.chapterId,item1.status)">
					<view class="jieStyle">
						<view class="u-line-1" style="width: 80%;">
							{{ item1.chapterName }}
						</view>
						<view :class="[item1.status ? 'xuanzhuang' : '']">
							<u-icon name="arrow-down"></u-icon>
						</view>
					</view>
					<view v-if="item1.children !=[] && item1.status  ">
						<view v-for="(item2,index2) in item1.children " :key="index2">
							<view class="pianduanStyle">
								<view class="u-line-1" style="width: 80%;">
									<image src="../../../static/image/zhang.png"
										style="width: 26upx;height: 22upx;" mode=""></image>
									{{ item2.chapterName }}
								</view>
								<view style="color: #1A90FF;">
									<text v-if="item2.onlineMinute != 0">{{item2.onlineMinute}}分钟</text>
									<text v-else>未打卡</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</view>

3.每一级单独设置点击事件

clickChapt1(id, status) {
	for (vari in this.listData) {
		for (var j in this.listData[i].children) {
			if (this.listData[i].children[j].chapterId == id) {
				this.listData[i].children[j].status = !this.listData[i].children[j].status
			} else {
				this.listData[i].children[j].status = false
			}
			this.$forceUpdate()
		}
	}
},
clickChapt(id, status) {
	for (var i in this.listData) {
		if (this.listData[i].chapterId == id) {
			this.listData[i].status = !this.listData[i].status
		} else {
			this.listData[i].status = false
		}
		this.$forceUpdate()
	}
},

4.css样式


	.zhangStyle {
		background: #E8ECF0;
		border-radius: 4px 4px 0px 0px;
		font-size: 14px;
		font-family: PingFang-SC-Bold, PingFang-SC;
		font-weight: bold;
		color: #1A90FF;
		line-height: 20px;
		padding: 32upx;
		display: flex;
		justify-content: space-between;

		.xuanzhuang {
			transform: rotate(180deg);
		}
	}

	.jieStyle {
		background: #F5F7F9;
		border-radius: 4px;
		font-size: 14px;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #8F8F90;
		line-height: 20px;
		padding: 10px 10px 10px 25px;
		display: flex;
		justify-content: space-between;

		.xuanzhuang {
			transform: rotate(180deg);
		}
	}

	.pianduanStyle {
		background: #F5F7F9;
		border-radius: 4px;
		padding: 10px 10px 10px 30px;
		font-size: 12px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #8F8F90;
		line-height: 17px;
		display: flex;
		justify-content: space-between;
		border-top: 1px #E6E6E6 solid;

		>view:first-child {
			display: flex;
			align-items: center;

			image {
				margin-right: 20upx;
			}
		}
	}