vue下拉列表年月日联动

最新推荐文章于 2024-04-12 09:17:26 发布

不积硅步

最新推荐文章于 2024-04-12 09:17:26 发布

阅读量1.6k

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_42977003/article/details/126266261

版权

vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

vue下拉列表年月日联动

在这里插入图片描述

  <div class="top">
          <el-select v-model="year" clearable placeholder="请选择年">
            <el-option
              v-for="item in years"
              :key="item"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-select>

          <el-select v-model="month" clearable placeholder="请选择月">
            <el-option
              v-for="item in months"
              :key="item"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-select>
          <el-select v-model="day" clearable placeholder="请选择月">
            <el-option
              v-for="item in days"
              :key="item"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-select>
        </div>

<script>
export default {
  name: "HospitalizationChargeDaily",
  data() {
    return {
      years: [''],
      months: [''],
      days: [''],
      year: '',
      month: '',
      day: '',
    };
  },
  created() {
    this.initDate();
  },
  watch: {
    month: function () {
      if (
        ((this.year % 4 === 0 && this.year % 100 !== 0) ||
          this.year % 400 === 0) &&
        this.month === 2
      ) {
        this.days = [""];
        for (let i = 1; i <= 29; i++) this.days.push(i);
      } else {
        if (
          this.month === 1 ||
          this.month === 3 ||
          this.month === 5 ||
          this.month === 7 ||
          this.month === 8 ||
          this.month === 10 ||
          this.month === 12
        ) {
          this.days = [""];
          for (let i = 1; i <= 31; i++) this.days.push(i);
        } else if (this.month === 2) {
          this.days = [""];
          for (let i = 1; i <= 28; i++) this.days.push(i);
        } else {
          this.days = [""];
          for (let i = 1; i <= 30; i++) this.days.push(i);
        }
      }
    },
  },
  methods: {
    initDate() {
      let currentyear = new Date().getFullYear();
      for (let i = currentyear - 5; i <= currentyear + 5; i++) {
        this.years.push(i);
      }
      for(let i = 1; i <= 12; i++){
        this.months.push(i)
      }
      for(let i = 1; i <= 31; i++){
        this.days.push(i);
      }
    },
  },
};
</script>