【第004篇】基于vue实现只选择月日功能

公司最近有个需求，设置每年的某月某日迁移账单，因此需要设计界面让用户选择月和日。在网上找了找，很少有这种组件的。目前仅找到一个日期选择框，但是试用后发现存在问题，无法绑定默认值。最终换了一个思路，利用element的Cascader级联选择器实现了一个。请看下图：

具体实现主要代码：

<el-form-item>
   每年&nbsp;<el-cascader v-model="date" :options="options" separator="" :props="{ expandTrigger: 'hover' }" style="width:120px"></el-cascader>&nbsp;迁移账单。
</el-form-item>

        
<script>
export default {
  data () {
    return {
      date: [],
      options: []
    }
  },
  mounted () {
    this.initDate()
  },
  methods: {
    initDate () {
      const { options } = this
      for (let i = 0; i < 12; i++) {
        const month = { value: `${i + 1}`, label: `${i + 1}月` }
        const children = []
        for (let j = 0; j < 31; j++) {
          const day = { value: `${j + 1}`, label: `${j + 1}号` }
          if (j < 29) {
            children.push(day)
          }
          if (j === 29) {
            if (i !== 1) {
              children.push(day)
            }
          }
          if (j === 30) {
            if ([1, 3, 5, 7, 8, 10, 12].includes(i + 1)) {
              children.push(day)
            }
          }
        }
        this.$set(month, 'children', children)
        options.push(month)
      }
    }
  }
}
</script>

通过一个按钮点击事件获取其选择的值：console.info(this.date)，可得到一个数组，如下截图：

this.date[0] : 表示月份
this.date[1] : 表示日