VUE element-ui 之多级下拉菜单（筛选框）

多级筛选框:

<span>时间筛选</span>
    <el-cascader
      v-model="value"
      style="width:160px"
      size="small"
      :options="option"
      @change="handleChange"
    />

自定义筛选框内的值:

value: ['按年统计'],
      option: [
        {
          value: '按年统计',
          label: '按年统计'
        },
        {
          value: '按月统计',
          label: '按月统计',
          children: [
            {
              value: '近3个月',
              label: '近3个月'
            },
            {
              value: '近6个月',
              label: '近6个月'
            },
            {
              value: '近一年',
              label: '近一年'
            },
            {
              value: '全部',
              label: '全部'
            }
          ]
        }
      ],

调用方法:

 handleChange(value) {
      console.log(value)
    }
    这里获取筛选框内的值

效果如图:

这里可自定义是否有多级筛选（可参照data内自定义的值）