首页 > 其他分享 >ElementUI 本身没有提供年份范围选择组件,但可以通过封装两个年份选择器来实现类似的功能。以下是一个使用 Vue2 和 ElementUI 实现年份范围选择器的示例代码:

ElementUI 本身没有提供年份范围选择组件,但可以通过封装两个年份选择器来实现类似的功能。以下是一个使用 Vue2 和 ElementUI 实现年份范围选择器的示例代码:

时间:2024-07-15 10:56:49浏览次数:8  
标签:年份 startYear ElementUI Number endYear 选择器

ElementUI 本身没有提供年份范围选择组件,但可以通过封装两个年份选择器来实现类似的功能。以下是一个使用 Vue2 和 ElementUI 实现年份范围选择器的示例代码:

 

<script>
export default {
  name: 'YearRangePicker',
  // 接收父组件传入的年份范围数据
  props: {
    value: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      startYear: '',
      endYear: ''
    }
  },
  watch: {
    value: {
      handler() {
        const [startYear, endYear] = this.value
        // 初始化自身变量,将父组件传入的年份范围设置到两个年份选择器中
        this.startYear = String(startYear || '')
        this.endYear = String(endYear || '')
      },
      deep: true
    }
  },
  methods: {
    changeStartYear(val) {
      // 当开始年份大于结束年份时,进行调换
      if (Number(this.startYear) > Number(this.endYear)) {
        this.startYear = this.endYear
        this.endYear = val
      }
      // 将改动传回父组件
      this.$emit('input', [Number(this.startYear), Number(this.endYear)])
    },
    changeEndYear(val) {
      if (Number(this.startYear) > Number(this.endYear)) {
        this.endYear = this.startYear
        this.startYear = val
      }
      this.$emit('input', [Number(this.startYear), Number(this.endYear)])
    }
  }
}
</script>

<template>
  <div class="year-range-picker">
    <el-date-picker
      v-model="startYear"
      type="year"
      placeholder="选择开始年"
      class="year-picker"
      @change="changeStartYear"
      format="yyyy 年"
      value-format="yyyy"
    />
    <span class="range-word">至</span>
    <el-date-picker
      v-model="endYear"
      type="year"
      placeholder="选择结束年"
      class="year-picker"
      @change="changeEndYear"
      format="yyyy 年"
      value-format="yyyy"
    />
  </div>
</template>

<style scoped lang="scss">
.year-range-picker {
  .range-word {
    margin-left: 10px;
    margin-right: 10px;
  }

  .year-picker {
    max-width: 120px;
  }
}
</style>

 

标签:年份,startYear,ElementUI,Number,endYear,选择器
From: https://www.cnblogs.com/yeminglong/p/18302740

相关文章

  • k8s字段选择器
    目录一、概述二、基本语法三、支持的字段1、错误示例2、支持的字段列表四、支持的操作符1、示例五、跨多种资源类型使用字段选择器一、概述在Kubernetes中,字段选择器(FieldSelectors)和标签选择器(LabelSelectors)是两种不同的查询机制,用于过滤和选择特定的资源。字段选择器允许用......
  • K8S标签与标签选择器
    目录一、标签1、简介2、为什么需要标签3、标签命名规范3.1、标签名3.2、标签的value4、标签的基本操作4.1、创建标签4.1.1、资源清单方式4.1.2、命令行方式4.2、查看标签4.2.1、查看刚才打标的两个pod4.2.2、通过标签过滤查询4.2.3、将标签显示在输出结果中4.3、添加标签4.3.1、分......
  • 子代选择器、子代选择器的嵌套使用及效果图
    教学视频来自html+css课程:55、后代、子代选择器_哔哩哔哩_bilibili一、标签选择器:即通过标签名称进行选择<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"/><metaname="viewport"content="width=device-width,init......
  • 如何在 SCSS 中实现复杂的嵌套选择器并确保代码的可维护性?
    在SCSS中实现复杂的嵌套选择器时,可以遵循以下几个原则以确保代码的可维护性:限制嵌套层级:避免层级过深的嵌套,最好不要超过三级。过多的嵌套会增加代码的复杂性和选择器的特异性,降低代码的可读性和维护性。使用父元素选择器:尽量使用父元素选择器&来限定样式的作用范围......
  • 跟我一起学习和开发动态表单系统-前端用vue、elementui实现方法(3)
    基于Vue、ElementUI和SpringBoot+MyBatis的动态表单系统前端实现解析在现代企业信息系统中,动态表单是一种非常常见的功能。它可以根据业务需求灵活地调整表单结构,以满足不同的数据收集和展示需求。在本文中,我们将探讨一种基于Vue、ElementUI和SpringBoot+MyBatis......
  • 编译elementUI主题scss
    elementVue2工程1. 安装包"gulp":"^4.0.2","gulp-autoprefixer":"^8.0.0","gulp-minify-css":"^1.2.4","gulp-sass":"^4.0.2","gulp-uglify":"^3.0.2",2.......
  • 使用ElementUI组件库
    引入ElementUI组件库        1.安装插件npmielement-ui-S    2.引入组件库importElementUIfrom'element-ui';    3.引入全部样式import'element-ui/lib/theme-chalk/index.css';    4.使用Vue.use(ElementUI);    ......
  • vue elementUI el-tree 下拉树功能(包括搜索/默认高亮/展开下拉框默认定位于选中项的位
    <template><div><el-form:model="formData"ref="refFormData"label-width="180px"><el-form-itemlabel="景点"prop="location_id"><el-selectv-model="formData.location_name&qu......
  • JAVA妇产科专科电子病历系统源码,前端框架:Vue,ElementUI
    JAVA妇产科专科电子病历系统源码,前端框架:Vue,ElementUI孕产妇健康管理信息管理系统是一种将孕产妇健康管理信息进行集中管理和存储的系统。通过建立该系统,有助于提高孕产妇健康管理的效率和质量,减少医疗事故发生的可能性,管理医疗资源,保证孕产妇得到及时、准确的医疗服务。该系......
  • elementui el-tree 勾选/取消勾选:子级关联,父级不关联
    :check-strictly="true"父子不关联,在方法里处理子级关联逻辑setChecked方法需要定义node-key="id"<el-treeref="tree":data="treeData":props="defaultProps"default-expand-allhighlight-current:expand......