• Cascader 级联选择
    • 概述
    • 代码示例
    • API
      • Cascader props
      • Cascader events

    Cascader 级联选择

    概述

    从一组相关联的数据集合中进行选择，常用于省市区、公司级层、事务分类等。

    相比 Select 组件，可以一次性完成选择，体验更好。

    代码示例

    Cascader 级联选择 - 图1

    基础用法

    级联选择对数据有较严格要求，请参照示例的格式使用data，每项数据至少包含 value、label 两项，子集为 children，以此类推。

    value 为当前选择的数据的 value 值的数组，比如 ['beijing', 'gugong'] ，按照级联顺序依次排序，使用 v-model 进行双向绑定。

    1. <template>
    2.     <Cascader :data="data" v-model="value1"></Cascader>
    3. </template>
    4. <script>
    5.     export default {
    6.         data () {
    7.             return {
    8.                 value1: [],
    9.                 data: [{
    10.                     value: 'beijing',
    11.                     label: '北京',
    12.                     children: [
    13.                         {
    14.                             value: 'gugong',
    15.                             label: '故宫'
    16.                         },
    17.                         {
    18.                             value: 'tiantan',
    19.                             label: '天坛'
    20.                         },
    21.                         {
    22.                             value: 'wangfujing',
    23.                             label: '王府井'
    24.                         }
    25.                     ]
    26.                 }, {
    27.                     value: 'jiangsu',
    28.                     label: '江苏',
    29.                     children: [
    30.                         {
    31.                             value: 'nanjing',
    32.                             label: '南京',
    33.                             children: [
    34.                                 {
    35.                                     value: 'fuzimiao',
    36.                                     label: '夫子庙',
    37.                                 }
    38.                             ]
    39.                         },
    40.                         {
    41.                             value: 'suzhou',
    42.                             label: '苏州',
    43.                             children: [
    44.                                 {
    45.                                     value: 'zhuozhengyuan',
    46.                                     label: '拙政园',
    47.                                 },
    48.                                 {
    49.                                     value: 'shizilin',
    50.                                     label: '狮子林',
    51.                                 }
    52.                             ]
    53.                         }
    54.                     ],
    55.                 }]
    56.             }
    57.         }
    58.     }
    59. </script>

    Cascader 级联选择 - 图2

    默认值

    指定 value 默认值，组件会在初始化时选定数据。

    1. <template>
    2.     <Cascader :data="data" v-model="value2"></Cascader>
    3. </template>
    4. <script>
    5.     export default {
    6.         data () {
    7.             return {
    8.                 value2: ['jiangsu', 'suzhou', 'zhuozhengyuan'],
    9.                 data: [{
    10.                     value: 'beijing',
    11.                     label: '北京',
    12.                     children: [
    13.                         {
    14.                             value: 'gugong',
    15.                             label: '故宫'
    16.                         },
    17.                         {
    18.                             value: 'tiantan',
    19.                             label: '天坛'
    20.                         },
    21.                         {
    22.                             value: 'wangfujing',
    23.                             label: '王府井'
    24.                         }
    25.                     ]
    26.                 }, {
    27.                     value: 'jiangsu',
    28.                     label: '江苏',
    29.                     children: [
    30.                         {
    31.                             value: 'nanjing',
    32.                             label: '南京',
    33.                             children: [
    34.                                 {
    35.                                     value: 'fuzimiao',
    36.                                     label: '夫子庙',
    37.                                 }
    38.                             ]
    39.                         },
    40.                         {
    41.                             value: 'suzhou',
    42.                             label: '苏州',
    43.                             children: [
    44.                                 {
    45.                                     value: 'zhuozhengyuan',
    46.                                     label: '拙政园',
    47.                                 },
    48.                                 {
    49.                                     value: 'shizilin',
    50.                                     label: '狮子林',
    51.                                 }
    52.                             ]
    53.                         }
    54.                     ],
    55.                 }]
    56.             }
    57.         }
    58.     }
    59. </script>

    Cascader 级联选择 - 图3

    移入展开

    设置属性 trigger 为 hover，当鼠标悬停时就会展开子集。

    1. <template>
    2.     <Cascader :data="data" trigger="hover"></Cascader>
    3. </template>
    4. <script>
    5.     export default {
    6.         data () {
    7.             return {
    8.                 data: [{
    9.                     value: 'beijing',
    10.                     label: '北京',
    11.                     children: [
    12.                         {
    13.                             value: 'gugong',
    14.                             label: '故宫'
    15.                         },
    16.                         {
    17.                             value: 'tiantan',
    18.                             label: '天坛'
    19.                         },
    20.                         {
    21.                             value: 'wangfujing',
    22.                             label: '王府井'
    23.                         }
    24.                     ]
    25.                 }, {
    26.                     value: 'jiangsu',
    27.                     label: '江苏',
    28.                     children: [
    29.                         {
    30.                             value: 'nanjing',
    31.                             label: '南京',
    32.                             children: [
    33.                                 {
    34.                                     value: 'fuzimiao',
    35.                                     label: '夫子庙',
    36.                                 }
    37.                             ]
    38.                         },
    39.                         {
    40.                             value: 'suzhou',
    41.                             label: '苏州',
    42.                             children: [
    43.                                 {
    44.                                     value: 'zhuozhengyuan',
    45.                                     label: '拙政园',
    46.                                 },
    47.                                 {
    48.                                     value: 'shizilin',
    49.                                     label: '狮子林',
    50.                                 }
    51.                             ]
    52.                         }
    53.                     ],
    54.                 }]
    55.             }
    56.         }
    57.     }
    58. </script>

    Cascader 级联选择 - 图4

    自定义显示

    通过设置 slot 可以自定义显示内容，不局限于输入框。

    1. <template>
    2.     {{ text }}
    3.     <Cascader :data="data" @on-change="handleChange">
    4.         <a href="javascript:void(0)">选择</a>
    5.     </Cascader>
    6. </template>
    7. <script>
    8.     export default {
    9.         data () {
    10.             return {
    11.                 text: '未选择',
    12.                 data: [{
    13.                     value: 'beijing',
    14.                     label: '北京',
    15.                     children: [
    16.                         {
    17.                             value: 'gugong',
    18.                             label: '故宫'
    19.                         },
    20.                         {
    21.                             value: 'tiantan',
    22.                             label: '天坛'
    23.                         },
    24.                         {
    25.                             value: 'wangfujing',
    26.                             label: '王府井'
    27.                         }
    28.                     ]
    29.                 }, {
    30.                     value: 'jiangsu',
    31.                     label: '江苏',
    32.                     children: [
    33.                         {
    34.                             value: 'nanjing',
    35.                             label: '南京',
    36.                             children: [
    37.                                 {
    38.                                     value: 'fuzimiao',
    39.                                     label: '夫子庙',
    40.                                 }
    41.                             ]
    42.                         },
    43.                         {
    44.                             value: 'suzhou',
    45.                             label: '苏州',
    46.                             children: [
    47.                                 {
    48.                                     value: 'zhuozhengyuan',
    49.                                     label: '拙政园',
    50.                                 },
    51.                                 {
    52.                                     value: 'shizilin',
    53.                                     label: '狮子林',
    54.                                 }
    55.                             ]
    56.                         }
    57.                     ],
    58.                 }]
    59.             }
    60.         },
    61.         methods: {
    62.             handleChange (value, selectedData) {
    63.                 this.text = selectedData.map(o => o.label).join(', ');
    64.             }
    65.         }
    66.     }
    67. </script>

    Cascader 级联选择 - 图5

    禁用

    设置属性 disabled 可以禁用组件。

    给某项数据设置 disabled: true 可以禁用某一项。

    1. <template>
    2.     <Cascader :data="data2" disabled></Cascader>
    3.     <Cascader :data="data2"></Cascader>
    4. </template>
    5. <script>
    6.     export default {
    7.         data () {
    8.             return {
    9.                 data2: [{
    10.                     value: 'zhejiang',
    11.                     label: '浙江',
    12.                     children: [{
    13.                         value: 'hangzhou',
    14.                         label: '杭州',
    15.                         children: [{
    16.                             value: 'xihu',
    17.                             label: '西湖'
    18.                         }]
    19.                     }]
    20.                 }, {
    21.                     value: 'jiangsu',
    22.                     label: '江苏',
    23.                     disabled: true,
    24.                     children: [{
    25.                         value: 'nanjing',
    26.                         label: '南京',
    27.                         children: [{
    28.                             value: 'zhonghuamen',
    29.                             label: '中华门'
    30.                         }]
    31.                     }]
    32.                 }]
    33.             }
    34.         }
    35.     }
    36. </script>

    Cascader 级联选择 - 图6

    选择即改变

    设置属性 change-on-select 点任何一级都可以选择。

    1. <template>
    2.     <Cascader :data="data" change-on-select></Cascader>
    3. </template>
    4. <script>
    5.     export default {
    6.         data () {
    7.             return {
    8.                 data: [{
    9.                     value: 'beijing',
    10.                     label: '北京',
    11.                     children: [
    12.                         {
    13.                             value: 'gugong',
    14.                             label: '故宫'
    15.                         },
    16.                         {
    17.                             value: 'tiantan',
    18.                             label: '天坛'
    19.                         },
    20.                         {
    21.                             value: 'wangfujing',
    22.                             label: '王府井'
    23.                         }
    24.                     ]
    25.                 }, {
    26.                     value: 'jiangsu',
    27.                     label: '江苏',
    28.                     children: [
    29.                         {
    30.                             value: 'nanjing',
    31.                             label: '南京',
    32.                             children: [
    33.                                 {
    34.                                     value: 'fuzimiao',
    35.                                     label: '夫子庙',
    36.                                 }
    37.                             ]
    38.                         },
    39.                         {
    40.                             value: 'suzhou',
    41.                             label: '苏州',
    42.                             children: [
    43.                                 {
    44.                                     value: 'zhuozhengyuan',
    45.                                     label: '拙政园',
    46.                                 },
    47.                                 {
    48.                                     value: 'shizilin',
    49.                                     label: '狮子林',
    50.                                 }
    51.                             ]
    52.                         }
    53.                     ],
    54.                 }]
    55.             }
    56.         }
    57.     }
    58. </script>

    Cascader 级联选择 - 图7

    自定义已选项

    对于显示的结果，可以通过 render-format 接收一个函数来自定义。

    其中第一个参数 labels 是当前选择的label的集合，第二个参数 selectedData 是当前选择的数据集合，可以利用它们组合出你想要显示的内容。

    1. <template>
    2.     <Cascader :data="data3" :render-format="format"></Cascader>
    3. </template>
    4. <script>
    5.     export default {
    6.         data () {
    7.             return {
    8.                 data3: [{
    9.                     value: 'zhejiang',
    10.                     label: '浙江',
    11.                     children: [{
    12.                         value: 'hangzhou',
    13.                         label: '杭州',
    14.                         children: [{
    15.                             value: 'xihu',
    16.                             label: '西湖',
    17.                             code: 310000
    18.                         }]
    19.                     }]
    20.                 }, {
    21.                     value: 'jiangsu',
    22.                     label: '江苏',
    23.                     children: [{
    24.                         value: 'nanjing',
    25.                         label: '南京',
    26.                         children: [{
    27.                             value: 'zhonghuamen',
    28.                             label: '中华门',
    29.                             code: 210000
    30.                         }]
    31.                     }]
    32.                 }]
    33.             }
    34.         },
    35.         methods: {
    36.             format (labels, selectedData) {
    37.                 const index = labels.length - 1;
    38.                 const data = selectedData[index] || false;
    39.                 if (data && data.code) {
    40.                     return labels[index] + ' - ' + data.code;
    41.                 }
    42.                 return labels[index];
    43.             }
    44.         }
    45.     }
    46. </script>

    Cascader 级联选择 - 图8

    尺寸

    通过设置size属性为large和small将输入框设置为大和小尺寸，不设置为默认（中）尺寸。

    1. <template>
    2.     <Cascader :data="data" size="large"></Cascader>
    3.     <br>
    4.     <Cascader :data="data"></Cascader>
    5.     <br>
    6.     <Cascader :data="data" size="small"></Cascader>
    7. </template>
    8. <script>
    9.     export default {
    10.         data () {
    11.             return {
    12.                 data: [{
    13.                     value: 'beijing',
    14.                     label: '北京',
    15.                     children: [
    16.                         {
    17.                             value: 'gugong',
    18.                             label: '故宫'
    19.                         },
    20.                         {
    21.                             value: 'tiantan',
    22.                             label: '天坛'
    23.                         },
    24.                         {
    25.                             value: 'wangfujing',
    26.                             label: '王府井'
    27.                         }
    28.                     ]
    29.                 }, {
    30.                     value: 'jiangsu',
    31.                     label: '江苏',
    32.                     children: [
    33.                         {
    34.                             value: 'nanjing',
    35.                             label: '南京',
    36.                             children: [
    37.                                 {
    38.                                     value: 'fuzimiao',
    39.                                     label: '夫子庙',
    40.                                 }
    41.                             ]
    42.                         },
    43.                         {
    44.                             value: 'suzhou',
    45.                             label: '苏州',
    46.                             children: [
    47.                                 {
    48.                                     value: 'zhuozhengyuan',
    49.                                     label: '拙政园',
    50.                                 },
    51.                                 {
    52.                                     value: 'shizilin',
    53.                                     label: '狮子林',
    54.                                 }
    55.                             ]
    56.                         }
    57.                     ],
    58.                 }]
    59.             }
    60.         }
    61.     }
    62. </script>

    Cascader 级联选择 - 图9

    动态加载选项

    使用 load-data 属性可以异步加载子选项，需要给数据增加 loading 来标识当前是否在加载中。

    load-data 的第二个参数为回调，如果执行，则会自动展开当前项的子列表。

    1. <template>
    2.     <Cascader :data="data4" :load-data="loadData"></Cascader>
    3. </template>
    4. <script>
    5.     export default {
    6.         data () {
    7.             return {
    8.                 data4: [
    9.                     {
    10.                         value: 'beijing',
    11.                         label: '北京',
    12.                         children: [],
    13.                         loading: false
    14.                     },
    15.                     {
    16.                         value: 'hangzhou',
    17.                         label: '杭州',
    18.                         children: [],
    19.                         loading:false
    20.                     }
    21.                 ]
    22.             }
    23.         },
    24.         methods: {
    25.             loadData (item, callback) {
    26.                 item.loading = true;
    27.                 setTimeout(() => {
    28.                     if (item.value === 'beijing') {
    29.                         item.children = [
    30.                             {
    31.                                 value: 'talkingdata',
    32.                                 label: 'TalkingData'
    33.                             },
    34.                             {
    35.                                 value: 'baidu',
    36.                                 label: '百度'
    37.                             },
    38.                             {
    39.                                 value: 'sina',
    40.                                 label: '新浪'
    41.                             }
    42.                         ];
    43.                     } else if (item.value === 'hangzhou') {
    44.                         item.children = [
    45.                             {
    46.                                 value: 'ali',
    47.                                 label: '阿里巴巴'
    48.                             },
    49.                             {
    50.                                 value: '163',
    51.                                 label: '网易'
    52.                             }
    53.                         ];
    54.                     }
    55.                     item.loading = false;
    56.                     callback();
    57.                 }, 1000);
    58.             }
    59.         }
    60.     }
    61. </script>

    Cascader 级联选择 - 图10

    搜索

    使用属性 filterable 可直接搜索选项并选择。

    暂不支持服务端搜索。

    1. <template>
    2.     <Cascader v-model="value3" :data="data" filterable></Cascader>
    3. </template>
    4. <script>
    5.     export default {
    6.         data () {
    7.             return {
    8.                 data: [{
    9.                     value: 'beijing',
    10.                     label: '北京',
    11.                     children: [
    12.                         {
    13.                             value: 'gugong',
    14.                             label: '故宫'
    15.                         },
    16.                         {
    17.                             value: 'tiantan',
    18.                             label: '天坛'
    19.                         },
    20.                         {
    21.                             value: 'wangfujing',
    22.                             label: '王府井'
    23.                         }
    24.                     ]
    25.                 }, {
    26.                     value: 'jiangsu',
    27.                     label: '江苏',
    28.                     children: [
    29.                         {
    30.                             value: 'nanjing',
    31.                             label: '南京',
    32.                             children: [
    33.                                 {
    34.                                     value: 'fuzimiao',
    35.                                     label: '夫子庙',
    36.                                 }
    37.                             ]
    38.                         },
    39.                         {
    40.                             value: 'suzhou',
    41.                             label: '苏州',
    42.                             children: [
    43.                                 {
    44.                                     value: 'zhuozhengyuan',
    45.                                     label: '拙政园',
    46.                                 },
    47.                                 {
    48.                                     value: 'shizilin',
    49.                                     label: '狮子林',
    50.                                 }
    51.                             ]
    52.                         }
    53.                     ],
    54.                 }],
    55.                 value3: []
    56.             }
    57.         }
    58.     }
    59. </script>

    API

    Cascader props

    属性说明类型默认值
    data可选项的数据源，格式参照示例说明Array[]
    value当前已选项的数据，格式参照示例说明Array[]
    render-format选择后展示的函数，用于自定义显示格式Functionlabel => label.join(' / ')
    disabled是否禁用选择器Booleanfalse
    clearable是否支持清除Booleantrue
    placeholder输入框占位符String请选择
    trigger次级菜单展开方式，可选值为 click 或 hoverStringclick
    change-on-select当此项为 true 时，点选每级菜单选项值都会发生变化，具体见上面的示例Booleanfalse
    size输入框大小，可选值为large和small或者不填String-
    load-data动态获取数据，数据源需标识 loadingFunction-
    filterable是否支持搜索Booleanfalse
    not-found-text当搜索列表为空时显示的内容String无匹配数据
    transfer是否将弹层放置于 body 内，在 Tabs、带有 fixed 的 Table 列内使用时，建议添加此属性，它将不受父级样式影响，从而达到更好的效果Booleanfalse
    element-id给表单元素设置 id，详见 Form 用法。String-

    Cascader events

    事件名说明返回值
    on-change选择完成后的回调，返回值 value 即已选值 value，selectedData 为已选项的具体数据value, selectedData
    on-visible-change展开和关闭弹窗时触发显示状态，Boolean