前端vue实现高级检索小案例

剑阁峥嵘而崔嵬,一夫当关,万夫莫开 🏆 @蜀道难

🔎 了解博主

📢 个人简介: 哈喽！小伙伴们，我是水香木鱼，水瓶座一枚 😜 来自于黑龙江庆安
🏡 本站首页: 水香木鱼
🎨 系列专栏：后台管理系统
📖 人生格言: 生活是一面镜子。你对它笑，它就对你笑；你对它哭，它也对你哭。
🌏 小目标: 成为前端界、UI视觉界布道师

📑 文章内容

本次仅展示主要代码部分

在这里插入图片描述

一、template

1、 <i v-if="isShow" class="iconfont icon-fenlei2 el-icon--right"></i> 为默认显示高级检索右侧图标；

2、 <i v-else class="iconfont icon-fenlei1 el-icon--right"></i> 为点击后显示的图标颜色状态

实现原理很简单，使用v-if 进行状态的切换。

<!--高级检索按钮-->
<el-button 
	style="color: rgba(77, 74, 74, 0.89)" 
	type="text"  
	@click="getSearch">高级检索
		<i v-if="isShow" class="iconfont icon-fenlei2 el-icon--right"></i>
		<i v-else class="iconfont icon-fenlei1 el-icon--right"></i>
</el-button>
<!--高级检索下拉内容-->
<div v-if="isShow" class="psSearch">
	<div class="serchType">
	<div class="rowList">
		<p>状态分类：</p>
		<ul v-for="item in stateList" :key="item.id">
		<li>{{ item.text }}</li>
		</ul>
		</div>
		<i class="rowList_i"></i>
	</div>
</div>

二、script

data(){
   isShow: false,//切换状态
   //点击下拉显示的内容
   stateList: [
     {
      id: 0,
      text: "全部",
     },
     {
      id: 1,
      text: "进行中",
     },
     {
      id: 2,
      text: "已结束",
     },
   ],
},
methods: {
  //检索状态
  getSearch() {
      this.isShow = !this.isShow;
    },
}