美文网首页
vue实现年份下拉框

vue实现年份下拉框

作者: 上海_前端_求内推 | 来源:发表于2022-01-19 17:01 被阅读0次

1,html

 <el-form-item label="预算年度">
                <el-select
                  v-model="formselect.year"
                  placeholder="请选择"
                  filterable
                  class="searchfilter"
                  style="height: 32px; line-height: 32px; width: 150px"
                >
                  <el-option
                    v-for="item in years"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>

2, js

1,加载
 created() {
    var myDate = new Date();
    var year = myDate.getFullYear(); //获取当前年
    this.initSelectYear(year);
  },
2,方法
 initSelectYear(year) {
      this.years = [];
      for (let i = 0; i < 30; i++) {
        this.years.push({ value: year - i, label: year - i + "年" });
      }
    },

相关文章

网友评论

      本文标题:vue实现年份下拉框

      本文链接:https://www.haomeiwen.com/subject/sjgrhrtx.html