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

凡小多

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

阅读量406

点赞数

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

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

本文链接：https://blog.csdn.net/wgh4318/article/details/125653883

版权

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

<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