使用element UI Cascader 级联选择器实现简单的选择生日日期的功能（没有年份）

最新推荐文章于 2025-06-03 10:41:24 发布

原创

最新推荐文章于 2025-06-03 10:41:24 发布 · 3.7k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#element UI #vue.js #工作总结

实现效果：

选择完成，显示：

主要是为了在所有列表中实现按生日日期进行筛选的功能。

方法：

<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',