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

最新推荐文章于 2024-06-16 18:09:06 发布

自由的音符

最新推荐文章于 2024-06-16 18:09:06 发布

阅读量235

点赞数

文章标签： javascript 开发语言 ecmascript

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

版权

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

直接上代码
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);
    }
  }