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

清疚 2023-01-15 03:46 110阅读 0赞

**多级筛选框:**

<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)
        }
        这里获取筛选框内的值

**效果如图:**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hhblhpYW9YaV95ZWFs_size_16_color_FFFFFF_t_70_pic_center]  
这里可自定义是否有多级筛选（可参照data内自定义的值）

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hhblhpYW9YaV95ZWFs_size_16_color_FFFFFF_t_70_pic_center]: /images/20221022/d139e0226c14466098af89da09d6bd8e.png

发表评论取消回复

表情：

评论列表（有 0 条评论，110人围观）

还没有评论，来说两句吧...

相关阅读

相关多选下拉框（select 下拉多选）

选项1</option><option value="2">选项1</option><option value="3">选项1</option><option value...

古城微笑少年丶/ 2024年05月02日 20:21/ 0 赞/ 93 阅读

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

多级筛选框: <span>时间筛选</span> <el-cascader v-model="value" s

清疚/ 2023年01月15日 03:46/ 0 赞/ 111 阅读

相关 vue 下拉框筛选列表_vue的select 下拉框某一项设置为不可选

export default\{ name:‘app‘, data() \{return\{ "data": \[\{ "is\_true": "0", "regio

谁借莪１个温暖的怀抱￠/ 2022年11月01日 05:39/ 0 赞/ 269 阅读

相关 ElementUI Dropdown 下拉菜单

一、概述在后台项目中，使用Dropdown 下拉菜单时，发现对el-dropdown-item绑定点击事件时，一直没有触发，比如： <el-dropdown-

Bertha 。/ 2022年10月31日 01:35/ 0 赞/ 552 阅读

相关搜索下拉框级联

$('\cat\_type').change(function()\{ var id = $(this).children(

左手的ㄟ右手/ 2022年08月10日 16:32/ 0 赞/ 264 阅读

相关【JQuery】——级联下拉框效果

【html】 <html> <head> <title>JQuery实例-级联下拉框效果</title> <meta http-

柔情只为你懂/ 2022年07月14日 01:37/ 0 赞/ 279 阅读

相关 select下拉框（支持筛选、多选）

[Chosen][] 是一个支持[jQuery][]的select下拉框美化插件，它能让丑陋的、很长的select选择框变的更好看、更方便。不仅如此，它更扩展了select，增

今天药忘吃喽~/ 2022年06月14日 06:17/ 0 赞/ 481 阅读

相关自动筛选实现三级联动下拉菜单

要点：当选择一个选项的时候，后面的内容自动变成他自己独有的内容主要运用： 1、$(id).change(function(){}) 2、.show（） 3、

妖狐艹你老母/ 2022年06月08日 09:39/ 0 赞/ 286 阅读

相关 android筛选下拉框无法定位问题

　　近期用appium做android自动化的过程中，遇到一种筛选下拉框，神奇的是，定位工具定位怎样都定位不到。　　首先尝试用uiaotomator工具定位，无法定位到下拉

- 日理万妓/ 2021年12月18日 07:05/ 0 赞/ 639 阅读

相关小程序下拉列表框菜单

小程序下拉列表框菜单 <view class='top'> <view class='top-text'> 选择班别</view> <!--

浅浅的花香味﹌/ 2021年09月17日 07:50/ 0 赞/ 430 阅读