使用element UI Cascader 级联选择器实现简单的选择生日日期的功能（没有年份）
2018-06-25 17:43
1876 查看
实现效果：
选择完成，显示：
主要是为了在所有列表中实现按生日日期进行筛选的功能。
方法：
<tr> <td colspan="2"> <el-form-item label="会员生日" prop="vipBirthday"> <el-cascader :options="birthdayOptions" v-model="vipBirthday"> </el-cascader> </el-form-item> </td> </tr>options：
birthdayOptions: [...monthAndDate],使用了扩展运算符的方法，加载进JS文件，monthAndDate代码如下：（选择完成，数据可以直接获取到）
export default [
{
value: '01',
label: '01',
children: [{
value: '01',
label: '01',
},{
value: '02',
label: '02',
},{
value: '03',
label: '03',
},{
value: '04',
label: '04',
},{
value: '05',
label: '05',
},{
value: '06',
label: '06',
},{
value: '07',
label: '07',
},{
value: '08',
label: '08',
},{
value: '09',
label: '09',
},{
value: '10',
label: '10',
},{
value: '11',
label: '11',
},{
value: '12',
label: '12',
},{
value: '13',
label: '13',
},{
value: '14',
label: '14',
},{
value: '15',
label: '15',
},{
value: '16',
label: '16',
},{
value: '17',
label: '17',
},{
value: '18',
label: '18',
},{
value: '19',
label: '19',
},{
value: '20',
label: '20',
},{
value: '21',
label: '21',
},{
value: '22',
label: '22',
},{
value: '23',
label: '23',
},{
value: '24',
label: '24',
},{
value: '25',
label: '25',
},{
value: '26',
label: '26',
},{
value: '27',
label: '27',
},{
value: '28',
label: '28',
},{
value: '29',
label: '29',
},{
value: '30',
label: '30',
},{
value: '31',
label: '31',
}]
}, {
value: '02',
label: '02',
children: [{
value: '01',
label: '01',
},{
value: '02',
label: '02',
},{
value: '03',
label: '03',
},{
value: '04',
label: '04',
},{
value: '05',
label: '05',
},{
value: '06',
label: '06',
},{
value: '07',
label: '07',
},{
value: '08',
label: '08',
},{
value: '09',
label: '09',
},{
value: '10',
label: '10',
},{
value: '11',
label: '11',
},{
value: '12',
label: '12',
},{
value: '13',
label: '13',
},{
value: '14',
label: '14',
},{
value: '15',
label: '15',
},{
value: '16',
label: '16',
},{
value: '17',
label: '17',
},{
value: '18',
label: '18',
},{
value: '19',
label: '19',
},{
value: '20',
label: '20',
},{
value: '21',
label: '21',
},{
value: '22',
label: '22',
},{
value: '23',
label: '23',
},{
value: '24',
label: '24',
},{
value: '25',
label: '25',
},{
value: '26',
label: '26',
},{
value: '27',
label: '27',
},{
value: '28',
label: '28',
},{
value: '29',
label: '29',
}]
},{
value: '03',
label: '03',
children: [{
value: '01',
label: '01',
},{
value: '02',
label: '02',
},{
value: '03',
label: '03',
},{
value: '04',
label: '04',
},{
value: '05',
label: '05',
},{
value: '06',
label: '06',
},{
value: '07',
label: '07',
},{
value: '08',
label: '08',
},{
value: '09',
label: '09',
},{
value: '10',
label: '10',
},{
value: '11',
label: '11',
},{
value: '12',
label: '12',
},{
value: '13',
label: '13',
},{
value: '14',
label: '14',
},{
value: '15',
label: '15',
},{
value: '16',
label: '16',
},{
value: '17',
label: '17',
},{
value: '18',
label: '18',
},{
value: '19',
label: '19',
},{
value: '20',
label: '20',
},{
value: '21',
label: '21',
},{
value: '22',
label: '22',
},{
value: '23',
label: '23',
},{
value: '24',
label: '24',
},{
value: '25',
label: '25',
},{
value: '26',
label: '26',
},{
value: '27',
label: '27',
},{
value: '28',
label: '28',
},{
value: '29',
label: '29',
},{
value: '30',
label: '30',
},{
value: '31',
label: '31',
}]
},{
value: '04',
label: '04',
children: [{
value: '01',
label: '01',
},{
value: '02',
label: '02',
},{
value: '03',
label: '03',
},{
value: '04',
label: '04',
},{
value: '05',
label: '05',
},{
value: '06',
label: '06',
},{
value: '07',
label: '07',
},{
value: '08',
label: '08',
},{
value: '09',
label: '09',
},{
value: '10',
label: '10',
},{
value: '11',
label: '11',
},{
value: '12',
label: '12',
},{
value: '13',
label: '13',
},{
value: '14',
label: '14',
},{
value: '15',
label: '15',
},{
value: '16',
label: '16',
},{
value: '17',
label: '17',
},{
value: '18',
label: '18',
},{
value: '19',
label: '19',
},{
value: '20',
label: '20',
},{
value: '21',
label: '21',
},{
value: '22',
label: '22',
},{
value: '23',
label: '23',
},{
value: '24',
label: '24',
},{
value: '25',
label: '25',
},{
value: '26',
label: '26',
},{
value: '27',
label: '27',
},{
value: '28',
label: '28',
},{
value: '29',
label: '29',
},{
value: '30',
label: '30',
}]
},{
value: '05',
label: '05',
children: [{
value: '01',
label: '01',
},{
value: '02',
label: '02',
},{
value: '03',
label: '03',
},{
value: '04',
label: '04',
},{
value: '05',
label: '05',
},{
value: '06',
label: '06',
},{
value: '07',
label: '07',
},{
value: '08',
label: '08',
},{
value: '09',
label: '09',
},{
value: '10',
label: '10',
},{
value: '11',
label: '11',
},{
value: '12',
label: '12',
},{
value: '13',
label: '13',
},{
value: '14',
label: '14',
},{
value: '15',
label: '15',
},{
value: '16',
label: '16',
},{
value: '17',
label: '17',
},{
value: '18',
label: '18',
},{
value: '19',
label: '19',
},{
value: '20',
label: '20',
},{
value: '21',
label: '21',
},{
value: '22',
label: '22',
},{
value: '23',
label: '23',
},{
value: '24',
label: '24',
},{
value: '25',
label: '25',
},{
value: '26',
label: '26',
},{
value: '27',
label: '27',
},{
value: '28',
label: '28',
},{
value: '29',
label: '29',
},{
value: '30',
label: '30',
},{
value: '31',
label: '31',
}]
},{
value: '06',
label: '06',
children: [{
value: '01',
label: '01',
},{
value: '02',
label: '02',
},{
value: '03',
label: '03',
},{
value: '04',
label: '04',
},{
value: '05',
label: '05',
},{
value: '06',
label: '06',
},{
value: '07',
label: '07',
},{
value: '08',
label: '08',
},{
value: '09',
label: '09',
},{
value: '10',
label: '10',
},{
value: '11',
label: '11',
},{
value: '12',
label: '12',
},{
value: '13',
label: '13',
},{
value: '14',
label: '14',
},{
value: '15',
label: '15',
},{
value: '16',
label: '16',
},{
value: '17',
label: '17',
},{
value: '18',
label: '18',
},{
value: '19',
label: '19',
},{
value: '20',
label: '20',
},{
value: '21',
label: '21',
},{
value: '22',
label: '22',
},{
value: '23',
label: '23',
},{
value: '24',
label: '24',
},{
value: '25',
label: '25',
},{
value: '26',
label: '26',
},{
value: '27',
label: '27',
},{
value: '28',
label: '28',
},{
value: '29',
label: '29',
},{
value: '30',
label: '30',
}]
},{
value: '07',
label: '07',
children: [{
value: '01',
label: '01',
},{
value: '02',
label: '02',
},{
value: '03',
label: '03',
},{
value: '04',
label: '04',
},{
value: '05',
label: '05',
},{
value: '06',
label: '06',
},{
value: '07',
label: '07',
},{
value: '08',
label: '08',
},{
value: '09',
label: '09',
},{
value: '10',
label: '10',
},{
value: '11',
label: '11',
},{
value: '12',
label: '12',
},{
value: '13',
label: '13',
},{
value: '14',
label: '14',
},{
value: '15',
label: '15',
},{
value: '16',
label: '16',
},{
value: '17',
label: '17',
},{
value: '18',
label: '18',
},{
value: '19',
label: '19',
},{
value: '20',
label: '20',
},{
value: '21',
label: '21',
},{
value: '22',
label: '22',
},{
value: '23',
label: '23',
},{
value: '24',
label: '24',
},{
value: '25',
label: '25',
},{
value: '26',
label: '26',
},{
value: '27',
label: '27',
},{
value: '28',
label: '28',
},{
value: '29',
label: '29',
},{
value: '30',
label: '30',
},{
value: '31',
label: '31',
}]
},{
value: '08',
label: '08',
children: [{
value: '01',
label: '01',
},{
value: '02',
label: '02',
},{
value: '03',
label: '03',
},{
value: '04',
label: '04',
},{
value: '05',
label: '05',
},{
value: '06',
label: '06',
},{
value: '07',
label: '07',
},{
value: '08',
label: '08',
},{
value: '09',
label: '09',
},{
value: '10',
label: '10',
},{
value: '11',
label: '11',
},{
value: '12',
label: '12',
},{
value: '13',
label: '13',
},{
value: '14',
label: '14',
},{
value: '15',
label: '15',
},{
value: '16',
label: '16',
},{
value: '17',
label: '17',
},{
value: '18',
label: '18',
},{
value: '19',
label: '19',
},{
value: '20',
label: '20',
},{
value: '21',
label: '21',
},{
value: '22',
label: '22',
},{
value: '23',
label: '23',
},{
value: '24',
label: '24',
},{
value: '25',
label: '25',
},{
value: '26',
label: '26',
},{
value: '27',
label: '27',
},{
value: '28',
label: '28',
},{
value: '29',
label: '29',
},{
value: '30',
label: '30',
},{
value: '31',
label: '31',
}]
},{
value: '09',
label: '09',
children: [{
value: '01',
label: '01',
},{
value: '02',
label: '02',
},{
value: '03',
label: '03',
},{
value: '04',
label: '04',
},{
value: '05',
label: '05',
},{
value: '06',
label: '06',
},{
value: '07',
label: '07',
},{
value: '08',
label: '08',
},{
value: '09',
label: '09',
},{
value: '10',
label: '10',
},{
value: '11',
label: '11',
},{
value: '12',
label: '12',
},{
value: '13',
label: '13',
},{
value: '14',
label: '14',
},{
value: '15',
label: '15',
},{
value: '16',
label: '16',
},{
value: '17',
label: '17',
},{
value: '18',
label: '18',
},{
value: '19',
label: '19',
},{
value: '20',
label: '20',
},{
value: '21',
label: '21',
},{
value: '22',
label: '22',
},{
value: '23',
label: '23',
},{
value: '24',
label: '24',
},{
value: '25',
label: '25',
},{
value: '26',
label: '26',
},{
value: '27',
label: '27',
},{
value: '28',
label: '28',
},{
value: '29',
label: '29',
},{
value: '30',
label: '30',
}]
},{
value: '10',
label: '10',
children: [{
value: '01',
label: '01',
},{
value: '02',
label: '02',
},{
value: '03',
label: '03',
},{
value: '04',
label: '04',
},{
value: '05',
label: '05',
},{
value: '06',
label: '06',
},{
value: '07',
label: '07',
},{
value: '08',
label: '08',
},{
value: '09',
label: '09',
},{
value: '10',
label: '10',
},{
value: '11',
label: '11',
},{
value: '12',
label: '12',
},{
value: '13',
label: '13',
},{
value: '14',
label: '14',
},{
value: '15',
label: '15',
},{
value: '16',
label: '16',
},{
value: '17',
label: '17',
},{
value: '18',
label: '18',
},{
value: '19',
label: '19',
},{
value: '20',
label: '20',
},{
value: '21',
label: '21',
},{
value: '22',
label: '22',
},{
value: '23',
label: '23',
},{
value: '24',
label: '24',
},{
value: '25',
label: '25',
},{
value: '26',
label: '26',
},{
value: '27',
label: '27',
},{
value: '28',
label: '28',
},{
value: '29',
label: '29',
},{
value: '30',
label: '30',
},{
value: '31',
label: '31',
}]
},{
value: '11',
label: '11',
children: [{
value: '01',
label: '01',
},{
value: '02',
label: '02',
},{
value: '03',
label: '03',
},{
value: '04',
label: '04',
},{
value: '05',
label: '05',
},{
value: '06',
label: '06',
},{
value: '07',
label: '07',
},{
value: '08',
label: '08',
},{
value: '09',
label: '09',
},{
value: '10',
label: '10',
},{
value: '11',
label: '11',
},{
value: '12',
label: '12',
},{
value: '13',
label: '13',
},{
value: '14',
label: '14',
},{
value: '15',
label: '15',
},{
value: '16',
label: '16',
},{
value: '17',
label: '17',
},{
value: '18',
label: '18',
},{
value: '19',
label: '19',
},{
value: '20',
label: '20',
},{
value: '21',
label: '21',
},{
value: '22',
label: '22',
},{
value: '23',
label: '23',
},{
value: '24',
label: '24',
},{
value: '25',
label: '25',
},{
value: '26',
label: '26',
},{
value: '27',
label: '27',
},{
value: '28',
label: '28',
},{
value: '29',
label: '29',
},{
value: '30',
label: '30',
}]
},{
value: '12',
label: '12',
children: [{
value: '01',
label: '01',
},{
value: '02',
label: '02',
},{
value: '03',
label: '03',
},{
value: '04',
label: '04',
},{
value: '05',
label: '05',
},{
value: '06',
label: '06',
},{
value: '07',
label: '07',
},{
value: '08',
label: '08',
},{
value: '09',
label: '09',
},{
value: '10',
label: '10',
},{
value: '11',
label: '11',
},{
value: '12',
label: '12',
},{
value: '13',
label: '13',
},{
value: '14',
label: '14',
},{
value: '15',
label: '15',
},{
value: '16',
label: '16',
},{
value: '17',
label: '17',
},{
value: '18',
label: '18',
},{
value: '19',
label: '19',
},{
value: '20',
label: '20',
},{
value: '21',
label: '21',
},{
value: '22',
label: '22',
},{
value: '23',
label: '23',
},{
value: '24',
label: '24',
},{
value: '25',
label: '25',
},{
value: '26',
label: '26',
},{
value: '27',
label: '27',
},{
value: '28',
label: '28',
},{
value: '29',
label: '29',
},{
value: '30',
label: '30',
},{
value: '31',
label: '31',
}]
}
]
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 微信小程序使用picker实现时间和日期选择框功能【附源码下载】
- element UI Cascader 级联选择器 编辑 修改 数组 路径 问题（转载）
- 使用mint-ui popup和picker实现手机端选择性别的功能踩到的坑
- wheel自定义控件，实现城市三级联动，时间选择的功能简单使用
- 使用UIPickerView实现简单的城市选择器
- wheel自定义控件，实现城市三级联动，时间选择的功能简单使用
- 使用sui实现的选择控件【性别、日期、省市级联】
- 使用dwr实现下拉框级联和js实现动态选择option的selected状态方法总结
- 使用Javascript实现一种简单的数字混淆功能(高手绕过)
- javascript实现简单日期下拉选择器
- 使用 Raphael js 和JSON 来实现具备保存功能的简单的仿QQ秀
- TabHost ----使用1（用代码来实现功能但没有将界面设计和代码分开）
- C#使用命令行方式实现Ping简单功能 http://www.cnblogs.com/kevinton/archive/2007/06/28/798581.html
- flex4 日期选择器实现 2022-12-20样式的功能
- 【原创】使用vc向导简历的ATL COM简单对象好像没有IUnknown接口的实现？
- 使用jQuery实现的简单滚动新闻功能
- 使用FLEX实现简单WEB在线拍照功能
- jQuery插件Datepicker日期选择器实现Javascript自定义日期时间选择功能
- 使用dwr实现下拉框级联和js实现动态选择option的selected状态方法总结
- 使用 Windows API可以实现某些控件接口没有提供的功能