【第004篇】基于vue实现只选择月日功能
公司最近有个需求,设置每年的某月某日迁移账单,因此需要设计界面让用户选择月和日。在网上找了找,很少有这种组件的。目前仅找到一个日期选择框,但是试用后发现存在问题,无法绑定默认值。最终换了一个思路,利用element的Cascader级联选择器实现了一个。请看下图:具体实现主要代码:<el-form-item>每年 <el-cascader v-model="da
·
公司最近有个需求,设置每年的某月某日迁移账单,因此需要设计界面让用户选择月和日。在网上找了找,很少有这种组件的。目前仅找到一个日期选择框,但是试用后发现存在问题,无法绑定默认值。最终换了一个思路,利用element的Cascader级联选择器实现了一个。请看下图:
具体实现主要代码:
<el-form-item>
每年 <el-cascader v-model="date" :options="options" separator="" :props="{ expandTrigger: 'hover' }" style="width:120px"></el-cascader> 迁移账单。
</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] : 表示日
更多推荐
已为社区贡献2条内容
所有评论(0)