vue开发结合element-ui之自定义年季度搜索组件

1.项目要求列表页面增加搜索框，条件为年季度一体的搜索条件，element-ui没有提供，自己发封装一个（支持默认值）

2.组件效果图

3.利用了element的el-cascader组件，代码如下

<template>
  <div>
    <template>
      <el-cascader
        :options="options"
        :props="props"
        v-model="selectedOptions"
        @change="handleChange"
        :clearable="false"
        placeholder="请选择年份季度"
      >
      </el-cascader>
    </template>
  </div>
</template>
  </div>
</template>

<script>
import { deepClone } from '../../utils';
export default {
  props: {
    readonly: {
      type: Boolean,
      default: false,
    }
  },
  data() {
    const getYear = new Date().getFullYear()
    const getMonth = new Date().getMonth() + 1
    return {
      options: [], 下拉数据
      props: {
        value: "value",
        label: "label",
        children: "children",
      },
// 默认本年本季度
      selectedOptions: this.readonly ? [] : [getYear + '',getMonth > 6 ? '2' : '1'],
    };
  },
  watch: {
// 监听选中的值，将选中的值处理后传到父组件用于查询
    selectedOptions:{
      handler(val){
        // console.log(val,'侦听');
        if(Array.isArray(val) && val.length){
          let arr = deepClone(val)
          let str1 = Number(arr[0])
          let str2 = Number(arr[1])
          // console.log(str1 + '-' + str2);
// 调用父组件的方法，传递值
          this.$emit('change',str1 + '-' + str2)
        }else{
// 调用父组件的方法，传递值
          this.$emit('change','')
        }
      },
      immediate: true,
    }
  },
  mounted() {
    // 初始化选项数据，项目没有要求年与季度的范围，前端手动定死今年往前推15年，也可以是后端返回
    const currentYear = new Date().getFullYear();
    const options = [];
    for (let year = currentYear; year >= currentYear - 15; year--) {
      const yearOption = {
        value: year.toString(),
        label: year.toString(),
        children: [],
      };
      for (let quarter = 1; quarter <= 2; quarter++) {
        const quarterOption = {
          value: quarter.toString(),
          label: quarter === 1 ? "上半年度" : "下半年度",
        };
        yearOption.children.push(quarterOption);
      }
      options.push(yearOption);
    }
    this.options = options;
  },
  methods: {
    // 父组件改变子组件的值方法（用于重置回显默认值）
    changeValue(){
      const getYear = new Date().getFullYear()
      const getMonth = new Date().getMonth() + 1
      this.selectedOptions = [getYear + '',getMonth > 6 ? '2' : '1']
    },
    handleChange(value) {
      // 处理选择框值变化事件
      // console.log(value);
    },
    resert(){
      this.selectedOptions = []
    },
  },
};
</script>

4.父组件调用

// 使用 
<year-quarter-picker
            @change="quarterPicker"
            ref="yearQuarterPicker"
          ></year-quarter-picker>

import YearQuarterPicker from "./YearQuarterPicker.vue"; // 引入


components: {
    History,
    YearQuarterPicker,
    YearQuarter,
    DiaLog,
  }, // 注册

// 接收子组件传递的值
quarterPicker(val) {
      // console.log(val, "子组件传值");
      this.listQuery.frequencyValue = val;
    },
// 下面这个代码是重置回复默认值的
this.$refs.yearQuarterPicker.changeValue();

 5.年季度的需求一样可以通过修改上面代码来实现