Cascader

Demos

Size variants

Available size variants for the ui prop:xs / s / m / l.

请选择

<template>
<div class="cascader-wrap">
  <veui-cascader
    v-model="value"
    ui="l"
    :options="options"
  />
  <veui-cascader
    v-model="value"
    :options="options"
  />
  <veui-cascader
    v-model="value"
    ui="s"
    :options="options"
  />
  <veui-cascader
    v-model="value"
    ui="xs"
    :options="options"
  />
</div>
</template>

<script>
import { Cascader } from 'veui'

const options = [
  {
    label: '浙江',
    value: '浙江',
    options: [
      {
        label: '威海',
        value: '威海'
      },
      {
        label: '滨州',
        value: '滨州'
      },
      {
        label: '临沂',
        value: '临沂'
      },
      {
        label: '东营',
        value: '东营'
      },
      {
        label: '济南',
        value: '济南'
      }
    ]
  },
  {
    label: '山东',
    value: '山东',
    options: [
      {
        label: '菏泽',
        value: '菏泽',
        options: [
          {
            label: '菏泽1',
            value: '菏泽1'
          }
        ]
      },
      {
        label: '潍坊',
        value: '潍坊',
        options: [
          {
            label: '潍坊1',
            value: '潍坊1'
          }
        ]
      },
      {
        label: '泰山',
        value: '泰山'
      },
      {
        label: '烟台',
        value: '烟台'
      },
      {
        label: '华山',
        value: '华山'
      },
      {
        label: '衡山',
        value: '衡山'
      },
      {
        label: '嵩山',
        value: '嵩山'
      },
      {
        label: '恒山',
        value: '恒山'
      },
      {
        label: '大雪山',
        value: '大雪山'
      }
    ]
  },
  {
    label: '上海',
    value: '上海',
    disabled: true
  },
  {
    label: '北京',
    value: '北京'
  },
  {
    label: '海外',
    value: '海外',
    disabled: true,
    options: [
      {
        label: '日本',
        value: '日本'
      }
    ]
  }
]

export default {
  components: {
    'veui-cascader': Cascader
  },
  data () {
    return {
      value: null,
      options
    }
  }
}
</script>

<style lang="less" scoped>
.cascader-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.veui-cascader + .veui-cascader {
  margin-top: 12px;
}
</style>

Inline cascader

Use the inline prop to enable inline mode.

Edit this page on GitHubEdit

<template>
<article>
  <veui-cascader
    v-model="value"
    searchable
    inline
    :options="options"
  />
</article>
</template>

<script>
import { Cascader } from 'veui'

const options = [
  {
    label: '浙江',
    value: '浙江',
    options: [
      {
        label: '威海',
        value: '威海'
      },
      {
        label: '滨州',
        value: '滨州'
      },
      {
        label: '临沂',
        value: '临沂'
      },
      {
        label: '东营',
        value: '东营'
      },
      {
        label: '济南',
        value: '济南'
      }
    ]
  },
  {
    label: '山东',
    value: '山东',
    options: [
      {
        label: '菏泽',
        value: '菏泽',
        options: [
          {
            label: '菏泽1',
            value: '菏泽1'
          }
        ]
      },
      {
        label: '潍坊',
        value: '潍坊',
        options: [
          {
            label: '潍坊1',
            value: '潍坊1'
          }
        ]
      },
      {
        label: '泰山',
        value: '泰山'
      },
      {
        label: '烟台',
        value: '烟台'
      },
      {
        label: '华山',
        value: '华山'
      },
      {
        label: '衡山',
        value: '衡山'
      },
      {
        label: '嵩山',
        value: '嵩山'
      },
      {
        label: '恒山',
        value: '恒山'
      },
      {
        label: '大雪山',
        value: '大雪山'
      }
    ]
  },
  {
    label: '上海',
    value: '上海',
    disabled: true
  },
  {
    label: '北京',
    value: '北京'
  },
  {
    label: '海外',
    value: '海外',
    disabled: true,
    options: [
      {
        label: '日本',
        value: '日本'
      }
    ]
  }
]

export default {
  components: {
    'veui-cascader': Cascader
  },
  data () {
    return {
      value: null,
      options
    }
  }
}
</script>

Searchable options

Use the searchable prop to enable option searching.

Edit this page on GitHubEdit

<template>
<article>
  <veui-cascader
    v-model="value"
    searchable
    :options="options"
  />
</article>
</template>

<script>
import { Cascader } from 'veui'

const options = [
  {
    label: '浙江',
    value: '浙江',
    options: [
      {
        label: '威海',
        value: '威海'
      },
      {
        label: '滨州',
        value: '滨州'
      },
      {
        label: '临沂',
        value: '临沂'
      },
      {
        label: '东营',
        value: '东营'
      },
      {
        label: '济南',
        value: '济南'
      }
    ]
  },
  {
    label: '山东',
    value: '山东',
    options: [
      {
        label: '菏泽',
        value: '菏泽',
        options: [
          {
            label: '菏泽1',
            value: '菏泽1'
          }
        ]
      },
      {
        label: '潍坊',
        value: '潍坊',
        options: [
          {
            label: '潍坊1',
            value: '潍坊1'
          }
        ]
      },
      {
        label: '泰山',
        value: '泰山'
      },
      {
        label: '烟台',
        value: '烟台'
      },
      {
        label: '华山',
        value: '华山'
      },
      {
        label: '衡山',
        value: '衡山'
      },
      {
        label: '嵩山',
        value: '嵩山'
      },
      {
        label: '恒山',
        value: '恒山'
      },
      {
        label: '大雪山',
        value: '大雪山'
      }
    ]
  },
  {
    label: '上海',
    value: '上海',
    disabled: true
  },
  {
    label: '北京',
    value: '北京'
  },
  {
    label: '海外',
    value: '海外',
    disabled: true,
    options: [
      {
        label: '日本',
        value: '日本'
      }
    ]
  }
]

export default {
  components: {
    'veui-cascader': Cascader
  },
  data () {
    return {
      value: null,
      options
    }
  }
}
</script>

Multiple selections

Use the multiple prop to enable multiple selections.

Clearable ShowSelectAll click to expand hover to expand Max:

columnWidth:

Edit this page on GitHubEdit

<template>
<article>
  <section class="cascader-config">
    <veui-checkbox
      v-model="clearable2"
      ui="s"
    >
      Clearable
    </veui-checkbox>
    <veui-checkbox
      v-model="showSelectAll2"
      ui="s"
    >
      ShowSelectAll
    </veui-checkbox>
    <veui-radio
      v-model="trigger2"
      ui="s"
      value="click"
      name="columnTrigger2"
    >
      click to expand
    </veui-radio>
    <veui-radio
      v-model="trigger2"
      ui="s"
      value="hover"
      name="columnTrigger2"
    >
      hover to expand
    </veui-radio>
    <label>
      Max:
      <veui-number-input
        v-model="max2"
        ui="s"
      />
    </label>
    <label>
      columnWidth:
      <veui-input
        v-model="columnWidth2"
        ui="s"
      />
    </label>
  </section>
  <veui-cascader
    v-model="value2"
    class="mt-3p"
    :options="options"
    :searchable="searchable2"
    :column-trigger="trigger2"
    :clearable="clearable2"
    :inline="inline2"
    :show-select-all="showSelectAll2"
    :max="max2"
    :column-width="getRealColumnWidth(columnWidth2)"
    multiple
  />
</article>
</template>

<script>
import { Cascader, Checkbox, Radio, NumberInput, Input } from 'veui'

const options = [
  {
    label: '浙江',
    value: '浙江',
    options: [
      {
        label: '威海',
        value: '威海'
      },
      {
        label: '滨州',
        value: '滨州'
      },
      {
        label: '临沂',
        value: '临沂'
      },
      {
        label: '东营',
        value: '东营'
      },
      {
        label: '济南',
        value: '济南'
      }
    ]
  },
  {
    label: '山东',
    value: '山东',
    options: [
      {
        label: '菏泽',
        value: '菏泽',
        options: [
          {
            label: '菏泽1',
            value: '菏泽1'
          }
        ]
      },
      {
        label: '潍坊',
        value: '潍坊',
        options: [
          {
            label: '潍坊1',
            value: '潍坊1'
          }
        ]
      },
      {
        label: '泰山',
        value: '泰山'
      },
      {
        label: '烟台',
        value: '烟台'
      },
      {
        label: '华山',
        value: '华山'
      },
      {
        label: '衡山',
        value: '衡山'
      },
      {
        label: '嵩山',
        value: '嵩山'
      },
      {
        label: '恒山',
        value: '恒山'
      },
      {
        label: '大雪山',
        value: '大雪山'
      }
    ]
  },
  {
    label: '上海',
    value: '上海',
    disabled: true
  },
  {
    label: '北京',
    value: '北京'
  },
  {
    label: '海外',
    value: '海外',
    disabled: true,
    options: [
      {
        label: '日本',
        value: '日本'
      }
    ]
  }
]

export default {
  components: {
    'veui-cascader': Cascader,
    'veui-checkbox': Checkbox,
    'veui-radio': Radio,
    'veui-number-input': NumberInput,
    'veui-input': Input
  },
  data () {
    return {
      value2: null,
      searchable2: true,
      trigger2: 'click',
      clearable2: true,
      inline2: false,
      columnWidth2: '',
      showSelectAll2: false,
      max2: null,
      options
    }
  },
  methods: {
    getRealColumnWidth (val) {
      if (val && !isNaN(+val)) {
        return `${+val}px`
      }
      return val
    }
  }
}
</script>

<style lang="less" scoped>
.cascader-config {
  display: flex;
  align-items: center;
  height: 32px;
  & > * {
    margin-right: 8px;
    font-size: 12px;
  }
  .veui-input {
    width: 80px;
  }
}
.mt-3p {
  margin-top: 12px;
}
</style>

Select mode

Use the column-trigger prop to control when the option groups are expanded.

any leaf-only

请选择

Edit this page on GitHubEdit

<template>
<article>
  <section>
    <veui-radio-group
      v-model="selectMode"
      :items="selectModes"
    />
    <veui-cascader
      :select-mode="selectMode"
      :options="options"
    />
  </section>
</article>
</template>

<script>
import { Cascader, RadioGroup } from 'veui'

const options = [
  {
    label: '浙江',
    value: '浙江',
    options: [
      {
        label: '威海',
        value: '威海'
      },
      {
        label: '滨州',
        value: '滨州'
      },
      {
        label: '临沂',
        value: '临沂'
      },
      {
        label: '东营',
        value: '东营'
      },
      {
        label: '济南',
        value: '济南'
      }
    ]
  },
  {
    label: '山东',
    value: '山东',
    options: [
      {
        label: '菏泽',
        value: '菏泽',
        options: [
          {
            label: '菏泽1',
            value: '菏泽1'
          }
        ]
      },
      {
        label: '潍坊',
        value: '潍坊',
        options: [
          {
            label: '潍坊1',
            value: '潍坊1'
          }
        ]
      },
      {
        label: '泰山',
        value: '泰山'
      },
      {
        label: '烟台',
        value: '烟台'
      },
      {
        label: '华山',
        value: '华山'
      },
      {
        label: '衡山',
        value: '衡山'
      },
      {
        label: '嵩山',
        value: '嵩山'
      },
      {
        label: '恒山',
        value: '恒山'
      },
      {
        label: '大雪山',
        value: '大雪山'
      }
    ]
  },
  {
    label: '上海',
    value: '上海',
    disabled: true
  },
  {
    label: '北京',
    value: '北京'
  },
  {
    label: '海外',
    value: '海外',
    disabled: true,
    options: [
      {
        label: '日本',
        value: '日本'
      }
    ]
  }
]

export default {
  components: {
    'veui-cascader': Cascader,
    'veui-radio-group': RadioGroup
  },
  data () {
    return {
      selectMode: 'any',
      selectModes: [
        { label: 'any', value: 'any' },
        { label: 'leaf-only', value: 'leaf-only' }
      ],
      options
    }
  }
}
</script>

<style lang="less" scoped>
.veui-radio-group {
  margin-bottom: 20px;
}
</style>

Column trigger

Use the column-trigger prop to control when the subordinates in the dropdown panel are expanded.

click hover

请选择

Edit this page on GitHubEdit

<template>
<article>
  <section>
    <veui-radio-group
      v-model="trigger"
      :items="triggers"
    />
    <veui-cascader
      :column-trigger="trigger"
      :options="options"
    />
  </section>
</article>
</template>

<script>
import { Cascader, RadioGroup } from 'veui'

const options = [
  {
    label: '浙江',
    value: '浙江',
    options: [
      {
        label: '威海',
        value: '威海'
      },
      {
        label: '滨州',
        value: '滨州'
      },
      {
        label: '临沂',
        value: '临沂'
      },
      {
        label: '东营',
        value: '东营'
      },
      {
        label: '济南',
        value: '济南'
      }
    ]
  },
  {
    label: '山东',
    value: '山东',
    options: [
      {
        label: '菏泽',
        value: '菏泽',
        options: [
          {
            label: '菏泽1',
            value: '菏泽1'
          }
        ]
      },
      {
        label: '潍坊',
        value: '潍坊',
        options: [
          {
            label: '潍坊1',
            value: '潍坊1'
          }
        ]
      },
      {
        label: '泰山',
        value: '泰山'
      },
      {
        label: '烟台',
        value: '烟台'
      },
      {
        label: '华山',
        value: '华山'
      },
      {
        label: '衡山',
        value: '衡山'
      },
      {
        label: '嵩山',
        value: '嵩山'
      },
      {
        label: '恒山',
        value: '恒山'
      },
      {
        label: '大雪山',
        value: '大雪山'
      }
    ]
  },
  {
    label: '上海',
    value: '上海',
    disabled: true
  },
  {
    label: '北京',
    value: '北京'
  },
  {
    label: '海外',
    value: '海外',
    disabled: true,
    options: [
      {
        label: '日本',
        value: '日本'
      }
    ]
  }
]

export default {
  components: {
    'veui-cascader': Cascader,
    'veui-radio-group': RadioGroup
  },
  data () {
    return {
      trigger: 'click',
      triggers: [
        { label: 'click', value: 'click' },
        { label: 'hover', value: 'hover' }
      ],
      options
    }
  }
}
</script>

<style lang="less" scoped>
.veui-radio-group {
  margin-bottom: 20px;
}
</style>

Displaying values

Use the value-display prop to control how the selected value is displayed.

simple complete

请选择

Edit this page on GitHubEdit

<template>
<article>
  <section>
    <veui-radio-group
      v-model="valueDisplay"
      :items="valueDisplays"
    />
    <veui-cascader
      :value-display="valueDisplay"
      :options="options"
    />
  </section>
</article>
</template>

<script>
import { Cascader, RadioGroup } from 'veui'

const options = [
  {
    label: '浙江',
    value: '浙江',
    options: [
      {
        label: '威海',
        value: '威海'
      },
      {
        label: '滨州',
        value: '滨州'
      },
      {
        label: '临沂',
        value: '临沂'
      },
      {
        label: '东营',
        value: '东营'
      },
      {
        label: '济南',
        value: '济南'
      }
    ]
  },
  {
    label: '山东',
    value: '山东',
    options: [
      {
        label: '菏泽',
        value: '菏泽',
        options: [
          {
            label: '菏泽1',
            value: '菏泽1'
          }
        ]
      },
      {
        label: '潍坊',
        value: '潍坊',
        options: [
          {
            label: '潍坊1',
            value: '潍坊1'
          }
        ]
      },
      {
        label: '泰山',
        value: '泰山'
      },
      {
        label: '烟台',
        value: '烟台'
      },
      {
        label: '华山',
        value: '华山'
      },
      {
        label: '衡山',
        value: '衡山'
      },
      {
        label: '嵩山',
        value: '嵩山'
      },
      {
        label: '恒山',
        value: '恒山'
      },
      {
        label: '大雪山',
        value: '大雪山'
      }
    ]
  },
  {
    label: '上海',
    value: '上海',
    disabled: true
  },
  {
    label: '北京',
    value: '北京'
  },
  {
    label: '海外',
    value: '海外',
    disabled: true,
    options: [
      {
        label: '日本',
        value: '日本'
      }
    ]
  }
]

export default {
  components: {
    'veui-cascader': Cascader,
    'veui-radio-group': RadioGroup
  },
  data () {
    return {
      valueDisplay: 'simple',
      valueDisplays: [
        { label: 'simple', value: 'simple' },
        { label: 'complete', value: 'complete' }
      ],
      options
    }
  }
}
</script>

<style lang="less" scoped>
.veui-radio-group {
  margin-bottom: 20px;
}
</style>

API

Props

Name Type Default Description

ui

string=

Style variants.

Value	Description
`xs`	Extra small size.
`s`	Small size.
`m`	Medium size.
`l`	Large size.

options

Array<Object>

The list of options with items of type {label, value, options, disabled, position, ...}.

Name	Type	Description
`label`	`string`	The descriptive label of the option.
`value`	`*`	The value of the option.
`position`	`string`	How to display subordinate nodes, pop up by default, set `inline` to display inline.
`options`	`Array<Object>=`	An array of options' sub-options, the array item type is the same as the `options` prop array item.
`disabled`	`boolean=`	Whether the option is disabled.

value

Array<*>|*

v-model

The selected value / values.

multiple boolean false Whether to allow multiple selections.

inline boolean false Whether the dropdown panel is displayed in inline mode (expanding options will split the panel instead of expanding it outwards).

max number - The maximum number of selectable options when performing multiple selections.

placeholder string cascader.placeholder cascader.placeholder

clearable boolean false Whether the cascader is clearable.

searchable boolean false Whether the cascader is searchable.

expanded

boolean=

false

.sync

Whether the dropdown menu is expanded.

column-trigger

'hover' | 'click'

'click'

The timing of expanding sub-options in the dropdown panel.

Value	Description
`hover`	Expand on hover.
`click`	Expand on click.

select-mode

'leaf-only' | 'any'

'any'

Controls which items can be selected in single-select mode.

Value	Description
`leaf-only`	Only leaf options can be selected.
`any`	Any option can be selected.

column-width

number | string

When there are multiple columns in the dropdown panel, uniformly control the width of the columns except the last one.

When the value is a numeric value or can be converted to a numeric value, it is treated as a pixel value.

show-select-all boolean false In multiple selection mode is there a select all button.

value-display

'complete' | 'simple'

'simple'

Controls how the selected value is displayed.

Value	Description
`complete`	Displays a path that fully displays the selected value, such as “China > Shanghai”.
`simple`	Only displays the label of the selected value.

disabled boolean= false Whether the cascader is disabled.

readonly boolean= false Whether the cascader is read-only.

overlay-class string | Array | Object= - See the overlay-class prop of the Overlay component.

overlay-style string | Array | Object= - See the overlay-style prop of the Overlay component.

match (item, keyword, { ancestors }) => boolean | Array<[number, number]> - To customize highlighting logic. Case insensitive by default, see Autocomplete.

filter (item, keyword, { ancestors, offsets }) => boolean - To customize search hit logic, see Autocomplete.

Slots

Name Description

trigger

The entire dropdown trigger area.

Default content: the dropdown button.

Name	Type	Description
`value`	`*`	The selected value.
`selected`	`Object`	The selected option object.
`expanded`	`boolean`	Whether the dropdown panel is expanded.
`keyword`	`string`	The search keyword.
`select`	`function(option: Object): void`	Selects the specified option.
`toggle`	`function(force: boolean): void`	Toggles the expanded state of the dropddown menu.
`clear`	`function(): void`	Clears selected options.
`remove`	`function(option: Object): void`	Removes the specified option from seletions.
`updateKeyword`	`function(keyword: string): void`	Use to modify selected value.

pane The content of the dropdown panel. Shares the same slot props with the trigger slot.

before The content before the list of options. No default content. Shares the same slot props with the trigger slot.

after The content after the option list. No default content. Shares the same slot props with the trigger slot.

column-before

The area in front of each column in the drop-down panel. No default content.

Name	Type	Description
`option`	`Object`	The parent option of the column, where the `options` property gets the data of the current column.

column-after The area after each column in the dropdown panel. No default content. Shares the same slot props with the before slot.

label

The label of the dropdown button.

Displays the label of selected option or the text content of the selected embedded option by default.

Name	Type	Description
`label`	`string`	The descriptive label of the selected option.
`value`	`*`	The value of the selected option.
`checked`	`boolean`	Whether the cascader has a selected value.
`disabled`	`boolean=`	Whether the option is disabled.

Additionally, custom properties apart from the listed ones will also be passed into the slot props object via v-bind.

option-label

The label text of each option (option without options property). Displays the label of the option by default.

Default content: The value of the option label prop.

Name	Type	Description
`option`	`Object`	The descriptive label of the option.
`select`	`function(option: Object): void`	Selects the current option.
`expand`	`function(option: Object): void`	Expands the current option.
`click`	`function(option: Object): void`	Clicks the content of the current option, will select/expand the current option as appropriate.

option

The entire area of the option.

Default content: default content of the internal Option component.

Shares the same slot props with the option-label slot.

selected

The area that displays the selected value.

Default content: the label of selected option for single selection, the tags of each selected option for multiple selection.

Name	Type	Description
`label`	`string`	Option label.
`value`	`*`	Option value.
`checked`	`boolean`	Whether the option is selected.
`disabled`	`boolean=`	Whether the option is disabled.

Name	Type	Description
`selected`	`Array<Object>`	Array of the selected options.

Events

Name	Description
`input`	Triggered when a search keyword is entered. The callback parameter is `(value: string)`, and `value` is the value of the input box.
`select`	`v-model` Triggered after the selected state changes, the callback parameter is `(value: *)`. `value` is the value of the currently selected option value.
`afteropen`	Triggered after the dropdown panel is expanded.
`afterclose`	Triggered after the dropdown panel is collapsed.

Global configs

Key	Type	Default	Description
`cascader.placeholder`	`string`	`@@cascader.placeholder`	Placeholder content when not selected.

@@ prefixed values denote corresponding properties in the locale settings.

Icons

Name	Description
`expand`	Expand the dropdown.
`collapse`	Collapse the dropdown.
`clear`	Clear selected.
`separator`	Toggle icon.

Edit this page on GitHubEdit