vue封装组件——时间筛选统计

凡小多

已于 2022-07-12 09:25:59 修改

阅读量472

点赞数

分类专栏： vue 文章标签： vue.js javascript 前端

于 2022-07-07 10:36:21 首次发布

本文链接：https://blog.youkuaiyun.com/wgh4318/article/details/125653883

版权

本文介绍了如何在Vue.js中封装一个时间筛选组件，用于统计功能。组件支持年份和日期选择，具备默认选中、禁用选项以及自定义日期格式的特性，并提供回调函数在切换统计或选择日期时触发。

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

效果图：
在这里插入图片描述

<statisticalFilteringCard :title="title" active="month" :disableActive="['year','date']" :queryValue.sync="yearMonth" @changeDate="getList">
</statisticalFilteringCard>

参数解释：

title：标题xxx统计表
active：默认选中，不传默认年统计
disableActive：禁用统计，传递数组，不传默认都可用
querValue：传递选择的日期数据，格式根据选择统计定，默认为为年-月-日
@changeDate：回调方法，切换统计或选择日期时调用

<template>
  <el-card>
    <el-row type="flex" justify="space-between" class="navTitle">
      <el-col :span="6">{
  { title }}</el-col>
      <div class="timeFilter">
        <div class="timeFilter-item" :class="{ disableCursor: disableActive.includes('year') }">
          <span @click="handleChangeDate('year')"
            :class="{ active: queryType === 'year', disablePointer: disableActive.includes('year') || queryType === 'year' }">年统计</span>
        </div>
        <div class="timeFilter-item" :class="{ disableCursor: disableActive.includes('month') }">
          <span