表格表单筛选高级搜索展开与收起效果

最新推荐文章于 2025-01-22 14:01:32 发布

自由的音符

最新推荐文章于 2025-01-22 14:01:32 发布

阅读量423

点赞数

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/weCat_s/article/details/130143126

版权

该文章展示了如何在Vue.js应用中创建一个可展开和收起的高级搜索功能，使用条件展示日期范围选择器。通过点击触发按钮，利用Vue的data属性和CSS变换实现展开与收起的动画效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

表格表单筛选高级搜索展开与收起效果

直接上代码
template部分：

<div>
     <span class="trigger operation-btn" @click="() => (isShow = !isShow)" :class="{ isShow }">
     	高级筛选
     	<el-icon class="caret"><CaretBottom /></el-icon>
     </span>
</div>
<div class="whitespace-nowrap" v-if="isShow">
      <span class="text-[14px] text-[#454954]">添加时间：</span>
      <el-date-picker
        v-model="dateTime"
        type="daterange"
        format="YYYY-MM-DD"
        class="w-[316px] h-[32px] mt-4"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
        :prefix-icon="customPrefix"
        :clearable="false"
      />
    </div>

css部分:

.trigger {
    @apply flex items-center ml-auto cursor-pointer select-none;
    color: var(--el-color-primary);
    .caret {
      transition: all 0.5s;
    }
    &.isShow .caret {
      transform: rotate(180deg);
    }
  }