vue3 + ant 写高级筛选

最新推荐文章于 2024-10-04 13:18:14 发布

你亦老

最新推荐文章于 2024-10-04 13:18:14 发布

阅读量179

点赞数 2

文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/weixin_57229715/article/details/142522904

版权

想当一条只会复制粘贴的闲鱼，找了半天没有好用的代码

只好自己当栽树人了

<script setup >
	const isOpen = ref(false)
	const sxArry = reactive([
		{
			title: '学院',
			categor: ['全部', '基础医学院', '生物医学工程学院', '药学院', '公共卫生学院', '口腔医学院', '护理学院'],
			isOpen: true
		},
		{
			title: '职称',
			categor: ['全部', '特聘教授', '教授', '副教授', '讲师/助理教授'],
			isOpen: isOpen
		},
		{
			title: '名字首字母',
			isOpen: isOpen,
			categor: [
				'全部',
				'A',
				'B',
				'C',
				'D',
				'E',
				'F',
				'G',
				'H',
				'I',
				'J',
				'K',
				'L',
				'M',
				'N',
				'O',
				'P',
				'Q',
				'R',
				'S',
				'T',
				'U',
				'R',
				'W',
				'X',
				'Y',
				'Z'
			]
		}
	])
	const selectItem = reactive(['基础医学院', '全部', '全部'])

	const handleOpen = () => {
		isOpen.value = !isOpen.value 
	}
	const hanldeItemClick = (lineIndex,el) => {
		selectItem[lineIndex] = el
	}
</script>
<template>
	<div>
		<a-card>
			<div v-for="(item,lineIndex) of sxArry">
				<div v-if="item.isOpen"  class="screen">
					<div class="left">{{ item.title }} ：</div>
					<div class="right">
						<span v-for="(el) of item.categor" @click="hanldeItemClick(lineIndex,el)" :class="[{ itemActive: selectItem[lineIndex] === el }, 'cateItem']">
							{{ el }}
						</span>
					</div>
				</div>
			</div>
			<div class="openBtn" @click="handleOpen">高级筛选&nbsp;
				<up-outlined v-if="isOpen"/>
				<down-outlined v-else/>
			</div>
		</a-card>
	</div>
</template>
<style lang="less" scoped>
	.screen {
		display: flex;
		margin-bottom: 18px;
		.left {
			color: #666666;
			width: 100px;
			text-align: right;
		}
		.cateItem {
			margin: 0px 6px;
			padding: 4px 8px;
			cursor: pointer;
		}
		.itemActive {
			background-color: #a20b47;
			color: #fff;
		}
	}
	.openBtn {
		text-align: center;
		color: #a20b47;
		cursor: pointer;
	}
</style>