有两种触发子菜单的方式

    只需为 Cascader 的属性指定选项数组即可渲染出一个级联选择器。通过props.expandTrigger可以定义展开子级菜单的触发方式。

    禁用选项

    通过在数据源中设置 disabled 字段来声明该选项是禁用的

    Cascader 级联选择器 - 图1

    本例中，options指定的数组中的第一个元素含有disabled: true键值对，因此是禁用的。在默认情况下，Cascader 会检查数据中每一项的disabled字段是否为true，如果你的数据中表示禁用含义的字段名不为disabled，可以通过props.disabled属性来指定（详见下方 API 表格）。当然，value、label和children这三个字段名也可以通过同样的方式指定。

    1. <el-cascader :options="options"></el-cascader>
    3. <script>
    4.   export default {
    5.     data() {
    6.       return {
    7.         options: [{
    8.           value: 'zhinan',
    9.           label: '指南',
    10.           disabled: true,
    11.           children: [{
    12.             value: 'shejiyuanze',
    13.             label: '设计原则',
    14.             children: [{
    15.               value: 'yizhi',
    16.               label: '一致'
    17.             }, {
    18.               value: 'fankui',
    19.               label: '反馈'
    20.             }, {
    21.               value: 'xiaolv',
    22.               label: '效率'
    23.             }, {
    24.               value: 'kekong',
    25.               label: '可控'
    26.             }]
    27.           }, {
    28.             value: 'daohang',
    29.             label: '导航',
    30.             children: [{
    31.               value: 'cexiangdaohang',
    32.               label: '侧向导航'
    33.             }, {
    34.               value: 'dingbudaohang',
    35.               label: '顶部导航'
    36.             }]
    37.           }]
    38.         }, {
    39.           value: 'zujian',
    40.           label: '组件',
    41.           children: [{
    42.             value: 'basic',
    43.             label: 'Basic',
    44.             children: [{
    45.               value: 'layout',
    46.               label: 'Layout 布局'
    47.             }, {
    48.               value: 'color',
    49.               label: 'Color 色彩'
    50.             }, {
    51.               value: 'typography',
    52.               label: 'Typography 字体'
    53.             }, {
    54.               value: 'icon',
    55.               label: 'Icon 图标'
    56.             }, {
    57.               value: 'button',
    58.               label: 'Button 按钮'
    59.             }]
    60.           }, {
    61.             value: 'form',
    62.             label: 'Form',
    63.             children: [{
    64.               value: 'radio',
    65.               label: 'Radio 单选框'
    66.             }, {
    67.               value: 'checkbox',
    68.               label: 'Checkbox 多选框'
    69.             }, {
    70.               value: 'input',
    71.               label: 'Input 输入框'
    72.             }, {
    73.               value: 'input-number',
    74.               label: 'InputNumber 计数器'
    75.             }, {
    76.               value: 'select',
    77.               label: 'Select 选择器'
    78.             }, {
    79.               value: 'cascader',
    80.               label: 'Cascader 级联选择器'
    81.             }, {
    82.               value: 'switch',
    83.               label: 'Switch 开关'
    84.             }, {
    85.               value: 'slider',
    86.               label: 'Slider 滑块'
    87.             }, {
    88.               value: 'time-picker',
    89.               label: 'TimePicker 时间选择器'
    90.             }, {
    91.               value: 'date-picker',
    92.               label: 'DatePicker 日期选择器'
    93.             }, {
    94.               value: 'datetime-picker',
    95.               label: 'DateTimePicker 日期时间选择器'
    96.             }, {
    97.               value: 'upload',
    98.               label: 'Upload 上传'
    99.             }, {
    100.               value: 'rate',
    101.               label: 'Rate 评分'
    102.             }, {
    103.               value: 'form',
    104.               label: 'Form 表单'
    105.             }]
    106.           }, {
    107.             value: 'data',
    108.             label: 'Data',
    109.             children: [{
    110.               value: 'table',
    111.               label: 'Table 表格'
    112.             }, {
    113.               value: 'tag',
    114.               label: 'Tag 标签'
    115.             }, {
    116.               value: 'progress',
    117.               label: 'Progress 进度条'
    118.             }, {
    119.               value: 'tree',
    120.               label: 'Tree 树形控件'
    121.             }, {
    122.               value: 'pagination',
    123.               label: 'Pagination 分页'
    124.             }, {
    125.               value: 'badge',
    126.               label: 'Badge 标记'
    127.             }]
    128.           }, {
    129.             value: 'notice',
    130.             label: 'Notice',
    131.             children: [{
    132.               value: 'alert',
    133.               label: 'Alert 警告'
    134.             }, {
    135.               value: 'loading',
    136.               label: 'Loading 加载'
    137.             }, {
    138.               value: 'message',
    139.               label: 'Message 消息提示'
    140.             }, {
    141.               value: 'message-box',
    142.               label: 'MessageBox 弹框'
    143.             }, {
    144.               value: 'notification',
    145.               label: 'Notification 通知'
    146.             }]
    147.           }, {
    148.             value: 'navigation',
    149.             label: 'Navigation',
    150.             children: [{
    151.               value: 'menu',
    152.               label: 'NavMenu 导航菜单'
    153.             }, {
    154.               value: 'tabs',
    155.               label: 'Tabs 标签页'
    156.             }, {
    157.               value: 'breadcrumb',
    158.               label: 'Breadcrumb 面包屑'
    159.             }, {
    160.               value: 'dropdown',
    161.               label: 'Dropdown 下拉菜单'
    162.             }, {
    163.               value: 'steps',
    164.               label: 'Steps 步骤条'
    165.             }]
    166.           }, {
    167.             value: 'others',
    168.             label: 'Others',
    169.             children: [{
    170.               value: 'dialog',
    171.               label: 'Dialog 对话框'
    172.             }, {
    173.               value: 'tooltip',
    174.               label: 'Tooltip 文字提示'
    175.             }, {
    176.               value: 'popover',
    177.               label: 'Popover 弹出框'
    178.             }, {
    179.               value: 'card',
    180.               label: 'Card 卡片'
    181.             }, {
    182.               value: 'carousel',
    183.               label: 'Carousel 走马灯'
    184.             }, {
    185.               value: 'collapse',
    186.               label: 'Collapse 折叠面板'
    187.             }]
    188.           }]
    189.         }, {
    190.           value: 'ziyuan',
    191.           label: '资源',
    192.           children: [{
    193.             value: 'axure',
    194.             label: 'Axure Components'
    195.           }, {
    196.             value: 'sketch',
    197.             label: 'Sketch Templates'
    198.           }, {
    199.             value: 'jiaohu',
    200.             label: '组件交互文档'
    201.           }]
    202.         }]
    203.       };
    204.     }
    205.   };
    206. </script>

    可清空

    通过 clearable 设置输入框可清空

    1. <el-cascader :options="options" clearable></el-cascader>
    3. <script>
    4.   export default {
    5.     data() {
    6.       return {
    7.         options: [{
    8.           value: 'zhinan',
    9.           label: '指南',
    10.           children: [{
    11.             value: 'shejiyuanze',
    12.             label: '设计原则',
    13.             children: [{
    14.               value: 'yizhi',
    15.               label: '一致'
    16.             }, {
    17.               value: 'fankui',
    18.               label: '反馈'
    19.             }, {
    20.               value: 'xiaolv',
    21.               label: '效率'
    22.             }, {
    23.               value: 'kekong',
    24.               label: '可控'
    25.             }]
    26.           }, {
    27.             value: 'daohang',
    28.             label: '导航',
    29.             children: [{
    30.               value: 'cexiangdaohang',
    31.               label: '侧向导航'
    32.             }, {
    33.               value: 'dingbudaohang',
    34.               label: '顶部导航'
    35.             }]
    36.           }]
    37.         }, {
    38.           value: 'zujian',
    39.           label: '组件',
    40.           children: [{
    41.             value: 'basic',
    42.             label: 'Basic',
    43.             children: [{
    44.               value: 'layout',
    45.               label: 'Layout 布局'
    46.             }, {
    47.               value: 'color',
    48.               label: 'Color 色彩'
    49.             }, {
    50.               value: 'typography',
    51.               label: 'Typography 字体'
    52.             }, {
    53.               value: 'icon',
    54.               label: 'Icon 图标'
    55.             }, {
    56.               value: 'button',
    57.               label: 'Button 按钮'
    58.             }]
    59.           }, {
    60.             value: 'form',
    61.             label: 'Form',
    62.             children: [{
    63.               value: 'radio',
    64.               label: 'Radio 单选框'
    65.             }, {
    66.               value: 'checkbox',
    67.               label: 'Checkbox 多选框'
    68.             }, {
    69.               value: 'input',
    70.               label: 'Input 输入框'
    71.             }, {
    72.               value: 'input-number',
    73.               label: 'InputNumber 计数器'
    74.             }, {
    75.               value: 'select',
    76.               label: 'Select 选择器'
    77.             }, {
    78.               value: 'cascader',
    79.               label: 'Cascader 级联选择器'
    80.             }, {
    81.               value: 'switch',
    82.               label: 'Switch 开关'
    83.             }, {
    84.               value: 'slider',
    85.               label: 'Slider 滑块'
    86.             }, {
    87.               value: 'time-picker',
    88.               label: 'TimePicker 时间选择器'
    89.             }, {
    90.               value: 'date-picker',
    91.               label: 'DatePicker 日期选择器'
    92.             }, {
    93.               value: 'datetime-picker',
    94.               label: 'DateTimePicker 日期时间选择器'
    95.             }, {
    96.               value: 'upload',
    97.               label: 'Upload 上传'
    98.             }, {
    99.               value: 'rate',
    100.               label: 'Rate 评分'
    101.             }, {
    102.               value: 'form',
    103.               label: 'Form 表单'
    104.             }]
    105.           }, {
    106.             value: 'data',
    107.             label: 'Data',
    108.             children: [{
    109.               value: 'table',
    110.               label: 'Table 表格'
    111.             }, {
    112.               value: 'tag',
    113.               label: 'Tag 标签'
    114.             }, {
    115.               value: 'progress',
    116.               label: 'Progress 进度条'
    117.             }, {
    118.               value: 'tree',
    119.               label: 'Tree 树形控件'
    120.             }, {
    121.               value: 'pagination',
    122.               label: 'Pagination 分页'
    123.             }, {
    124.               value: 'badge',
    125.               label: 'Badge 标记'
    126.             }]
    127.           }, {
    128.             value: 'notice',
    129.             label: 'Notice',
    130.             children: [{
    131.               value: 'alert',
    132.               label: 'Alert 警告'
    133.             }, {
    134.               value: 'loading',
    135.               label: 'Loading 加载'
    136.             }, {
    137.               value: 'message',
    138.               label: 'Message 消息提示'
    139.             }, {
    140.               value: 'message-box',
    141.               label: 'MessageBox 弹框'
    142.             }, {
    143.               value: 'notification',
    144.               label: 'Notification 通知'
    145.             }]
    146.           }, {
    147.             value: 'navigation',
    148.             label: 'Navigation',
    149.             children: [{
    150.               value: 'menu',
    151.               label: 'NavMenu 导航菜单'
    152.             }, {
    153.               value: 'tabs',
    154.               label: 'Tabs 标签页'
    155.             }, {
    156.               value: 'breadcrumb',
    157.               label: 'Breadcrumb 面包屑'
    158.               value: 'dropdown',
    159.               label: 'Dropdown 下拉菜单'
    160.             }, {
    161.               value: 'steps',
    162.               label: 'Steps 步骤条'
    163.             }]
    164.           }, {
    165.             value: 'others',
    166.             label: 'Others',
    167.             children: [{
    168.               value: 'dialog',
    169.               label: 'Dialog 对话框'
    170.             }, {
    171.               value: 'tooltip',
    172.               label: 'Tooltip 文字提示'
    174.               value: 'popover',
    175.               label: 'Popover 弹出框'
    176.             }, {
    177.               value: 'card',
    178.               label: 'Card 卡片'
    179.             }, {
    180.               value: 'carousel',
    181.               label: 'Carousel 走马灯'
    182.             }, {
    183.               value: 'collapse',
    184.               label: 'Collapse 折叠面板'
    185.             }]
    186.           }]
    187.         }, {
    188.           value: 'ziyuan',
    189.           label: '资源',
    190.           children: [{
    191.             value: 'axure',
    192.             label: 'Axure Components'
    193.           }, {
    194.             value: 'sketch',
    195.             label: 'Sketch Templates'
    196.           }, {
    197.             value: 'jiaohu',
    198.             label: '组件交互文档'
    199.           }]
    200.         }]
    201.       }
    202.     }
    203.   }
    204. </script>

    仅显示最后一级

    可以仅在输入框中显示选中项最后一级的标签，而不是选中项所在的完整路径。

    属性show-all-levels定义了是否显示完整的路径，将其赋值为false则仅显示最后一级

    多选

    可通过 props.multiple = true 来开启多选模式

    Cascader 级联选择器 - 图2

    在开启多选模式后，默认情况下会展示所有已选中的选项的Tag，你可以使用collapse-tags来折叠Tag

    1. <div class="block">
    2.   <span class="demonstration">默认显示所有Tag</span>
    3.   <el-cascader
    4.     :options="options"
    5.     :props="props"
    6.     clearable></el-cascader>
    7. </div>
    8. <div class="block">
    9.   <span class="demonstration">折叠展示Tag</span>
    10.   <el-cascader
    11.     :options="options"
    12.     :props="props"
    13.     collapse-tags
    14.     clearable></el-cascader>
    15. </div>
    17. <script>
    18.   export default {
    19.     data() {
    20.       return {
    21.         props: { multiple: true },
    22.         options: [{
    23.           value: 1,
    24.           label: '东南',
    25.           children: [{
    26.             value: 2,
    27.             label: '上海',
    28.             children: [
    29.               { value: 3, label: '普陀' },
    30.               { value: 4, label: '黄埔' },
    31.               { value: 5, label: '徐汇' }
    32.             ]
    33.           }, {
    34.             value: 7,
    35.             label: '江苏',
    36.             children: [
    37.               { value: 8, label: '南京' },
    38.               { value: 9, label: '苏州' },
    39.               { value: 10, label: '无锡' }
    40.             ]
    41.           }, {
    42.             value: 12,
    43.             label: '浙江',
    44.             children: [
    45.               { value: 13, label: '杭州' },
    46.               { value: 14, label: '宁波' },
    47.               { value: 15, label: '嘉兴' }
    48.             ]
    49.           }]
    50.         }, {
    51.           value: 17,
    52.           label: '西北',
    53.           children: [{
    54.             value: 18,
    55.             label: '陕西',
    56.             children: [
    57.               { value: 19, label: '西安' },
    58.               { value: 20, label: '延安' }
    59.             ]
    60.           }, {
    61.             value: 21,
    62.             label: '新疆维吾尔族自治区',
    63.             children: [
    64.               { value: 22, label: '乌鲁木齐' },
    65.               { value: 23, label: '克拉玛依' }
    66.             ]
    67.           }]
    68.         }]
    69.       };
    70.     }
    71.   };
    72. </script>

    选择任意一级选项

    在单选模式下，你只能选择叶子节点；而在多选模式下，勾选父节点真正选中的都是叶子节点。启用该功能后，可让父子节点取消关联，选择任意一级选项。

    可通过 props.checkStrictly = true 来设置父子节点取消选中关联，从而达到选择任意一级选项的目的。

    1. <div class="block">
    2.   <span class="demonstration">单选选择任意一级选项</span>
    3.   <el-cascader
    4.     :options="options"
    5.     :props="{ checkStrictly: true }"
    6.     clearable></el-cascader>
    7. </div>
    8. <div class="block">
    9.   <span class="demonstration">多选选择任意一级选项</span>
    10.   <el-cascader
    11.     :options="options"
    12.     :props="{ multiple: true, checkStrictly: true }"
    13.     clearable></el-cascader>
    14. </div>
    16. <script>
    17.   export default {
    18.     data() {
    19.       return {
    20.         options: [{
    21.           value: 'zhinan',
    22.           label: '指南',
    23.           children: [{
    24.             value: 'shejiyuanze',
    25.             label: '设计原则',
    26.             children: [{
    27.               value: 'yizhi',
    28.               label: '一致'
    29.             }, {
    30.               value: 'fankui',
    31.               label: '反馈'
    32.             }, {
    33.               value: 'xiaolv',
    34.               label: '效率'
    35.             }, {
    36.               value: 'kekong',
    37.               label: '可控'
    38.             }]
    39.           }, {
    40.             value: 'daohang',
    41.             label: '导航',
    42.             children: [{
    43.               value: 'cexiangdaohang',
    44.               label: '侧向导航'
    45.             }, {
    46.               value: 'dingbudaohang',
    47.               label: '顶部导航'
    48.             }]
    49.           }]
    50.         }, {
    51.           value: 'zujian',
    52.           label: '组件',
    53.           children: [{
    54.             value: 'basic',
    55.             label: 'Basic',
    56.             children: [{
    57.               value: 'layout',
    58.               label: 'Layout 布局'
    59.             }, {
    60.               value: 'color',
    61.               label: 'Color 色彩'
    62.             }, {
    63.               value: 'typography',
    64.               label: 'Typography 字体'
    65.             }, {
    66.               value: 'icon',
    67.               label: 'Icon 图标'
    68.             }, {
    69.               value: 'button',
    70.               label: 'Button 按钮'
    71.             }]
    72.           }, {
    73.             value: 'form',
    74.             label: 'Form',
    75.             children: [{
    76.               value: 'radio',
    77.               label: 'Radio 单选框'
    78.             }, {
    79.               value: 'checkbox',
    80.               label: 'Checkbox 多选框'
    81.             }, {
    82.               value: 'input',
    83.               label: 'Input 输入框'
    84.             }, {
    85.               value: 'input-number',
    86.               label: 'InputNumber 计数器'
    87.             }, {
    88.               value: 'select',
    89.               label: 'Select 选择器'
    90.             }, {
    91.               value: 'cascader',
    92.               label: 'Cascader 级联选择器'
    93.             }, {
    94.               value: 'switch',
    95.               label: 'Switch 开关'
    96.             }, {
    97.               value: 'slider',
    98.               label: 'Slider 滑块'
    99.             }, {
    100.               value: 'time-picker',
    101.               label: 'TimePicker 时间选择器'
    102.             }, {
    103.               value: 'date-picker',
    104.               label: 'DatePicker 日期选择器'
    105.             }, {
    106.               value: 'datetime-picker',
    107.               label: 'DateTimePicker 日期时间选择器'
    108.             }, {
    109.               value: 'upload',
    110.               label: 'Upload 上传'
    111.             }, {
    112.               value: 'rate',
    113.               label: 'Rate 评分'
    114.             }, {
    115.               value: 'form',
    116.               label: 'Form 表单'
    117.             }]
    118.           }, {
    119.             value: 'data',
    120.             label: 'Data',
    121.             children: [{
    122.               value: 'table',
    123.               label: 'Table 表格'
    124.             }, {
    125.               value: 'tag',
    126.               label: 'Tag 标签'
    127.             }, {
    128.               value: 'progress',
    129.               label: 'Progress 进度条'
    130.             }, {
    131.               value: 'tree',
    132.               label: 'Tree 树形控件'
    133.             }, {
    134.               value: 'pagination',
    135.               label: 'Pagination 分页'
    136.             }, {
    137.               value: 'badge',
    138.               label: 'Badge 标记'
    139.             }]
    140.           }, {
    141.             value: 'notice',
    142.             label: 'Notice',
    143.             children: [{
    144.               value: 'alert',
    145.               label: 'Alert 警告'
    146.             }, {
    147.               value: 'loading',
    148.               label: 'Loading 加载'
    149.             }, {
    150.               value: 'message',
    151.               label: 'Message 消息提示'
    152.             }, {
    153.               value: 'message-box',
    154.               label: 'MessageBox 弹框'
    155.             }, {
    156.               value: 'notification',
    157.               label: 'Notification 通知'
    158.             }]
    159.           }, {
    160.             value: 'navigation',
    161.             label: 'Navigation',
    162.             children: [{
    163.               value: 'menu',
    164.               label: 'NavMenu 导航菜单'
    165.             }, {
    166.               value: 'tabs',
    167.               label: 'Tabs 标签页'
    168.             }, {
    169.               value: 'breadcrumb',
    170.               label: 'Breadcrumb 面包屑'
    171.             }, {
    172.               value: 'dropdown',
    173.               label: 'Dropdown 下拉菜单'
    174.             }, {
    175.               value: 'steps',
    176.               label: 'Steps 步骤条'
    177.             }]
    178.           }, {
    179.             value: 'others',
    180.             label: 'Others',
    181.             children: [{
    182.               value: 'dialog',
    183.               label: 'Dialog 对话框'
    184.             }, {
    185.               value: 'tooltip',
    186.               label: 'Tooltip 文字提示'
    187.             }, {
    188.               value: 'popover',
    189.               label: 'Popover 弹出框'
    190.             }, {
    191.               value: 'card',
    192.               label: 'Card 卡片'
    193.             }, {
    194.               value: 'carousel',
    195.               label: 'Carousel 走马灯'
    196.             }, {
    197.               value: 'collapse',
    198.               label: 'Collapse 折叠面板'
    199.             }]
    200.           }]
    201.         }, {
    202.           value: 'ziyuan',
    203.           label: '资源',
    204.           children: [{
    205.             value: 'axure',
    206.             label: 'Axure Components'
    207.           }, {
    208.             value: 'sketch',
    209.             label: 'Sketch Templates'
    210.           }, {
    211.             value: 'jiaohu',
    212.             label: '组件交互文档'
    213.           }]
    214.         }]
    215.       };
    216.     }
    217.   };
    218. </script>

    当选中某一级时，动态加载该级下的选项。

    Cascader 级联选择器 - 图3

    可搜索

    可以快捷地搜索选项并选择。

    将filterable赋值为true即可打开搜索功能，默认会匹配节点的label或所有父节点的label(由show-all-levels决定)中包含输入值的选项。你也可以用filter-method自定义搜索逻辑，接受一个函数，第一个参数是节点node，第二个参数是搜索关键词keyword，通过返回布尔值表示是否命中。

    1. <div class="block">
    2.   <span class="demonstration">单选可搜索</span>
    3.   <el-cascader
    4.     placeholder="试试搜索：指南"
    5.     :options="options"
    6.     filterable></el-cascader>
    7. </div>
    8. <div class="block">
    9.   <span class="demonstration">多选可搜索</span>
    10.   <el-cascader
    11.     placeholder="试试搜索：指南"
    12.     :options="options"
    13.     :props="{ multiple: true }"
    14.     filterable></el-cascader>
    15. </div>
    17. <script>
    18.   export default {
    19.     data() {
    20.       return {
    21.         options: [{
    22.           value: 'zhinan',
    23.           label: '指南',
    24.           children: [{
    25.             value: 'shejiyuanze',
    26.             label: '设计原则',
    27.             children: [{
    28.               value: 'yizhi',
    29.               label: '一致'
    30.             }, {
    31.               value: 'fankui',
    32.               label: '反馈'
    33.             }, {
    34.               value: 'xiaolv',
    35.               label: '效率'
    36.             }, {
    37.               value: 'kekong',
    38.               label: '可控'
    39.             }]
    40.           }, {
    41.             value: 'daohang',
    42.             label: '导航',
    43.             children: [{
    44.               value: 'cexiangdaohang',
    45.               label: '侧向导航'
    46.               value: 'dingbudaohang',
    47.               label: '顶部导航'
    48.             }]
    49.           }]
    51.           value: 'zujian',
    52.           label: '组件',
    53.           children: [{
    54.             value: 'basic',
    55.             label: 'Basic',
    56.             children: [{
    57.               value: 'layout',
    58.               label: 'Layout 布局'
    59.             }, {
    60.               value: 'color',
    61.               label: 'Color 色彩'
    62.             }, {
    63.               value: 'typography',
    64.               label: 'Typography 字体'
    65.             }, {
    66.               value: 'icon',
    67.               label: 'Icon 图标'
    68.             }, {
    69.               value: 'button',
    70.               label: 'Button 按钮'
    71.             }]
    72.           }, {
    73.             value: 'form',
    74.             label: 'Form',
    75.             children: [{
    76.               value: 'radio',
    77.               label: 'Radio 单选框'
    78.             }, {
    79.               value: 'checkbox',
    80.               label: 'Checkbox 多选框'
    81.             }, {
    82.               value: 'input',
    83.               label: 'Input 输入框'
    84.             }, {
    85.               value: 'input-number',
    86.               label: 'InputNumber 计数器'
    87.             }, {
    88.               value: 'select',
    89.               label: 'Select 选择器'
    90.             }, {
    91.               value: 'cascader',
    92.               label: 'Cascader 级联选择器'
    93.             }, {
    94.               value: 'switch',
    95.               label: 'Switch 开关'
    96.             }, {
    97.               value: 'slider',
    98.               label: 'Slider 滑块'
    99.             }, {
    100.               value: 'time-picker',
    101.               label: 'TimePicker 时间选择器'
    102.             }, {
    103.               value: 'date-picker',
    104.               label: 'DatePicker 日期选择器'
    105.             }, {
    106.               value: 'datetime-picker',
    107.               label: 'DateTimePicker 日期时间选择器'
    108.             }, {
    109.               value: 'upload',
    110.               label: 'Upload 上传'
    111.             }, {
    112.               value: 'rate',
    113.               label: 'Rate 评分'
    114.             }, {
    115.               value: 'form',
    116.               label: 'Form 表单'
    117.             }]
    118.           }, {
    119.             value: 'data',
    120.             label: 'Data',
    121.             children: [{
    122.               value: 'table',
    123.               label: 'Table 表格'
    124.             }, {
    125.               value: 'tag',
    126.               label: 'Tag 标签'
    127.             }, {
    128.               value: 'progress',
    129.               label: 'Progress 进度条'
    130.             }, {
    131.               value: 'tree',
    132.               label: 'Tree 树形控件'
    133.             }, {
    134.               value: 'pagination',
    135.               label: 'Pagination 分页'
    136.             }, {
    137.               value: 'badge',
    138.               label: 'Badge 标记'
    139.             }]
    140.           }, {
    141.             value: 'notice',
    142.             label: 'Notice',
    143.             children: [{
    144.               value: 'alert',
    145.               label: 'Alert 警告'
    146.             }, {
    147.               value: 'loading',
    148.               label: 'Loading 加载'
    149.             }, {
    150.               value: 'message',
    151.               label: 'Message 消息提示'
    152.             }, {
    153.               value: 'message-box',
    154.               label: 'MessageBox 弹框'
    155.             }, {
    156.               value: 'notification',
    157.               label: 'Notification 通知'
    158.             }]
    159.           }, {
    160.             value: 'navigation',
    161.             label: 'Navigation',
    162.             children: [{
    163.               value: 'menu',
    164.               label: 'NavMenu 导航菜单'
    165.             }, {
    166.               value: 'tabs',
    167.               label: 'Tabs 标签页'
    168.             }, {
    169.               value: 'breadcrumb',
    170.               label: 'Breadcrumb 面包屑'
    171.             }, {
    172.               value: 'dropdown',
    173.               label: 'Dropdown 下拉菜单'
    174.             }, {
    175.               value: 'steps',
    176.               label: 'Steps 步骤条'
    177.             }]
    178.           }, {
    179.             value: 'others',
    180.             label: 'Others',
    181.             children: [{
    182.               value: 'dialog',
    183.               label: 'Dialog 对话框'
    184.             }, {
    185.               value: 'tooltip',
    186.               label: 'Tooltip 文字提示'
    187.             }, {
    188.               value: 'popover',
    189.               label: 'Popover 弹出框'
    190.             }, {
    191.               value: 'card',
    192.               label: 'Card 卡片'
    193.             }, {
    194.               value: 'carousel',
    195.               label: 'Carousel 走马灯'
    196.             }, {
    197.               value: 'collapse',
    198.               label: 'Collapse 折叠面板'
    199.             }]
    200.           }]
    201.         }, {
    202.           value: 'ziyuan',
    203.           label: '资源',
    204.           children: [{
    205.             value: 'axure',
    206.             label: 'Axure Components'
    207.           }, {
    208.             value: 'sketch',
    209.             label: 'Sketch Templates'
    210.           }, {
    211.             value: 'jiaohu',
    212.             label: '组件交互文档'
    213.           }]
    214.         }]
    215.       };
    216.     }
    217.   };
    218. </script>

    自定义节点内容

    可以自定义备选项的节点内容

    Cascader 级联选择器 - 图4

    可以通过scoped slot对级联选择器的备选项的节点内容进行自定义，scoped slot会传入两个字段 node 和 data，分别表示当前节点的 Node 对象和数据。

    1. <el-cascader :options="options">
    2.   <template slot-scope="{ node, data }">
    3.     <span>{{ data.label }}</span>
    4.     <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
    5.   </template>
    6. </el-cascader>
    8. <script>
    9.   export default {
    10.     data() {
    11.       return {
    12.         options: [{
    13.           value: 'zhinan',
    14.           label: '指南',
    15.           children: [{
    16.             value: 'shejiyuanze',
    17.             label: '设计原则',
    18.             children: [{
    19.               value: 'yizhi',
    20.               label: '一致'
    21.             }, {
    22.               value: 'fankui',
    23.               label: '反馈'
    24.             }, {
    25.               value: 'xiaolv',
    26.               label: '效率'
    27.             }, {
    28.               value: 'kekong',
    29.               label: '可控'
    30.             }]
    31.           }, {
    32.             value: 'daohang',
    33.             label: '导航',
    34.             children: [{
    35.               value: 'cexiangdaohang',
    36.               label: '侧向导航'
    37.             }, {
    38.               value: 'dingbudaohang',
    39.               label: '顶部导航'
    40.             }]
    41.           }]
    42.         }, {
    43.           value: 'zujian',
    44.           label: '组件',
    45.           children: [{
    46.             value: 'basic',
    47.             label: 'Basic',
    48.             children: [{
    49.               value: 'layout',
    50.               label: 'Layout 布局'
    51.             }, {
    52.               value: 'color',
    53.               label: 'Color 色彩'
    54.             }, {
    55.               value: 'typography',
    56.               label: 'Typography 字体'
    57.             }, {
    58.               value: 'icon',
    59.               label: 'Icon 图标'
    60.             }, {
    61.               value: 'button',
    62.               label: 'Button 按钮'
    63.             }]
    64.           }, {
    65.             value: 'form',
    66.             label: 'Form',
    67.             children: [{
    68.               value: 'radio',
    69.               label: 'Radio 单选框'
    70.             }, {
    71.               value: 'checkbox',
    72.               label: 'Checkbox 多选框'
    73.             }, {
    74.               value: 'input',
    75.               label: 'Input 输入框'
    76.             }, {
    77.               value: 'input-number',
    78.               label: 'InputNumber 计数器'
    79.             }, {
    80.               value: 'select',
    81.               label: 'Select 选择器'
    82.             }, {
    83.               value: 'cascader',
    84.               label: 'Cascader 级联选择器'
    85.             }, {
    86.               value: 'switch',
    87.               label: 'Switch 开关'
    88.             }, {
    89.               value: 'slider',
    90.               label: 'Slider 滑块'
    91.             }, {
    92.               value: 'time-picker',
    93.               label: 'TimePicker 时间选择器'
    94.             }, {
    95.               value: 'date-picker',
    96.               label: 'DatePicker 日期选择器'
    97.             }, {
    98.               value: 'datetime-picker',
    99.               label: 'DateTimePicker 日期时间选择器'
    100.             }, {
    101.               value: 'upload',
    102.               label: 'Upload 上传'
    103.             }, {
    104.               value: 'rate',
    105.               label: 'Rate 评分'
    106.             }, {
    107.               value: 'form',
    108.               label: 'Form 表单'
    109.             }]
    110.           }, {
    111.             value: 'data',
    112.             label: 'Data',
    113.             children: [{
    114.               value: 'table',
    115.               label: 'Table 表格'
    116.             }, {
    117.               value: 'tag',
    118.               label: 'Tag 标签'
    119.             }, {
    120.               value: 'progress',
    121.               label: 'Progress 进度条'
    122.             }, {
    123.               value: 'tree',
    124.               label: 'Tree 树形控件'
    125.             }, {
    126.               value: 'pagination',
    127.               label: 'Pagination 分页'
    128.             }, {
    129.               value: 'badge',
    130.               label: 'Badge 标记'
    131.             }]
    132.           }, {
    133.             value: 'notice',
    134.             label: 'Notice',
    135.             children: [{
    136.               value: 'alert',
    137.               label: 'Alert 警告'
    138.             }, {
    139.               value: 'loading',
    140.               label: 'Loading 加载'
    141.             }, {
    142.               value: 'message',
    143.               label: 'Message 消息提示'
    144.             }, {
    145.               value: 'message-box',
    146.               label: 'MessageBox 弹框'
    147.             }, {
    148.               value: 'notification',
    149.               label: 'Notification 通知'
    150.             }]
    151.           }, {
    152.             value: 'navigation',
    153.             label: 'Navigation',
    154.             children: [{
    155.               value: 'menu',
    156.               label: 'NavMenu 导航菜单'
    157.             }, {
    158.               value: 'tabs',
    159.               label: 'Tabs 标签页'
    160.             }, {
    161.               value: 'breadcrumb',
    162.               label: 'Breadcrumb 面包屑'
    163.             }, {
    164.               value: 'dropdown',
    165.               label: 'Dropdown 下拉菜单'
    166.             }, {
    167.               value: 'steps',
    168.               label: 'Steps 步骤条'
    169.             }]
    170.           }, {
    171.             value: 'others',
    172.             label: 'Others',
    173.             children: [{
    174.               value: 'dialog',
    175.               label: 'Dialog 对话框'
    176.             }, {
    177.               value: 'tooltip',
    178.               label: 'Tooltip 文字提示'
    179.             }, {
    180.               value: 'popover',
    181.               label: 'Popover 弹出框'
    182.             }, {
    183.               value: 'card',
    184.               label: 'Card 卡片'
    185.             }, {
    186.               value: 'carousel',
    187.               label: 'Carousel 走马灯'
    188.             }, {
    189.               value: 'collapse',
    190.               label: 'Collapse 折叠面板'
    191.             }]
    192.           }]
    193.         }, {
    194.           value: 'ziyuan',
    195.           label: '资源',
    196.           children: [{
    197.             value: 'axure',
    198.             label: 'Axure Components'
    199.           }, {
    200.             value: 'sketch',
    201.             label: 'Sketch Templates'
    202.           }, {
    203.             value: 'jiaohu',
    204.             label: '组件交互文档'
    205.           }]
    206.         }]
    207.       }
    208.     }
    209.   }

    级联面板

    级联面板是级联选择器的核心组件，与级联选择器一样，有单选、多选、动态加载等多种功能。

    和级联选择器一样，通过options来指定选项，也可通过props来设置多选、动态加载等功能，具体详情见下方API表格。

    Cascader Attributes

    Cascader Events

    事件名称说明回调参数
    change当选中节点变化时触发选中节点的值
    expand-change当展开节点发生变化时触发各父级选项值组成的数组
    blur当失去焦点时触发(event: Event)
    focus当获得焦点时触发(event: Event)
    visible-change下拉框出现/隐藏时触发出现则为 true，隐藏则为 false
    remove-tag在多选模式下，移除Tag时触发移除的Tag对应的节点的值
    方法名说明参数
    getCheckedNodes获取选中的节点(leafOnly) 是否只是叶子节点，默认值为 false

    Cascader Slots

    CascaderPanel Attributes

    参数说明类型可选值默认值
    value / v-model选中项绑定值-——
    options可选项数据源，键名可通过 Props 属性配置array——
    props配置选项，具体见下表object——

    CascaderPanel Events

    事件名称说明回调参数
    change当选中节点变化时触发选中节点的值
    expand-change当展开节点发生变化时触发各父级选项值组成的数组

    CascaderPanel Methods

    CascaderPanel Slots

    名称说明
    -自定义备选项的节点内容，参数为 { node, data }，分别为当前节点的 Node 对象和数据
    参数说明类型可选值默认值
    expandTrigger次级菜单的展开方式stringclick / hover‘click’
    multiple是否多选boolean-false
    checkStrictly是否严格的遵守父子节点不互相关联boolean-false
    emitPath在选中节点改变时，是否返回由该节点所在的各级菜单的值所组成的数组，若设置 false，则只返回该节点的值boolean-true
    lazy是否动态加载子节点，需与 lazyLoad 方法结合使用boolean-false
    lazyLoad加载动态数据的方法，仅在 lazy 为 true 时有效function(node, resolve)，node为当前点击的节点，resolve为数据加载完成的回调(必须调用)--
    value指定选项的值为选项对象的某个属性值string—‘value’
    label指定选项标签为选项对象的某个属性值string—‘label’
    children指定选项的子选项为选项对象的某个属性值string—‘children’
    disabled指定选项的禁用为选项对象的某个属性值string—‘disabled’
    leaf指定选项的叶子节点的标志位为选项对象的某个属性值string—‘leaf’