Cascader

Demo

Size

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

Use the inline property to enable inline.

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>

Search

Use the searchable property to enable search.

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 Choice

Use the multiple property to enable multiple choice.

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

Use the select-mode property to control which items can be selected in single-select mode.

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 property 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>

Render Selected

Use the value-display property 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=

preset style.

value	Description
`xs`	Ultra small size.
`s`	Small size.
`m`	Medium size.
`l`	Lage size.

options

Array<Object>

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

Name	Type	Description
`label`	`string`	Textual description of the option.
`value`	`*`	The value corresponding to 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` property array item.
`disabled`	`boolean=`	Whether the option is disabled.

value

Array<*>|*

v-model

Selected value.

multiple boolean false Allow multiple selections.

inline boolean false Whether the drop-down panel is displayed inline.

max number - The maximum number of items allowed to be selected when multiple selections are made.

placeholder string cascader.placeholder Placeholder text when not selected.

clearable boolean false Clear selections.

searchable boolean false Search options.

expanded

boolean=

false

.sync

Whether the drop-down menu is expanded.

column-trigger

hover | click

click

Drop-down panel lower-level to be expanded at the time.

Value	Description
`hover`	The cursor hovers to expand the next.
`click`	The cursor click to expand the next.

select-mode

'leaf-only' | 'any'

any

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

Value	Description
`leaf-only`	Only leaf nodes can be selected.
`any`	Each nodes can be selected.

column-width

number | string

When there are multiple columns in the drop-down panel, uniformly control the width of the columns except the last column.

When there 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 style.

Value	Description
`complete`	A path that fully displays the selected value, such as "Hollywood > Disneyland Park".
`simple`	Only display the selected value text.

disabled boolean= false Whether is it disabled state.

readonly boolean= false Whether is it readonly state.

overlay-class string | Array | Object= - See the overlay component's overlay-class property.

overlay-style string | Array | Object= - See the Overlay component's overlay-style property.

match (item, keyword, { ancestors }) => boolean | Array<[number, number]> - Support custom highlighting logic, default case insensitive, refer to Autocomplete.

filter (item, keyword, { ancestors, offsets }) => boolean - Support custom search hit logic, refer to Autocomplete.

Slots

Name Description

trigger

The entire pull down trigger area.

Default content: drop-down button.

Name	Type	Description
`value`	`*`	Selected value.
`selected`	`Object`	Selected object.
`expanded`	`boolean`	Whether drop-down panel expane.
`keyword`	`string`	Search value.
`select`	`function(option: Object): void`	Use to set options.
`toggle`	`function(force: boolean): void`	Use to toggle the expanded state of the drop-down menu.
`clear`	`function(): void`	Use to clear selected options.
`remove`	`function(option: Object): void`	Use to remove a option, the parameter `option` is the option.
`updateKeyword`	`function(keyword: string): void`	Use to modify selected value.

pane Content slot in drop-down panel. As trigger slot with domain parameter.

before The content before the list of options. No default content. The scope parameter is the as the trigger slot.

after The content after the option list. No default content. The scope parameter is the as 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`	This parent options of the column, where the `options` property can get the data of the current column.

column-after The area after each column in the drop-down panel. No default content. The scope parameter is the as the column-before slot.

label

Drop-down button text area.

Default content: the value of the label property corresponding to the selected option or the text content of the selected option in inline mode.

Name	Type	Description
`label`	`string`	Selected text.
`value`	`*`	Selected value.
`checked`	`boolean`	Whether selected a certain value。
`disabled`	`boolean=`	Whether option is disabled.

PS. Fields other than the fields described above in the current options data are also automatically bound to scope parameters via v-bind.

option-label

Text area for dropdown options (without options).

Default content: The value of the option label property.

Name	Type	Description
`option`	`Object`	Current option.
`select`	`function(option: Object): void`	Selected current option.
`expand`	`function(option: Object): void`	Expand current option.
`click`	`function(option: Object): void`	Click current option content area, The current option is selected and/or expanded as appropriate.

option

The entire area of drop-down options available for selection.

Default content: Component default structure inside Option.

The scope parameter is the same as the option-label slot.

selected

Selected value rendering area.

Default content: render the tag of the selected item when single selected; render the tag of each selected item as Tag when multiple selected.

Name	Type	Description
`label`	`string`	Option text.
`value`	`*`	Option value.
`checked`	`boolean`	Whether already option.
`disabled`	`boolean=`	Whether option disable.

Name	Type	Description
`selected`	`Array<Object>`	Array of selected item data.

Events

Name	Description
`input`	Triggered when a search keyword is entered. The callback parameter is `(value: string)`, and `value` is the `value` 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 `value` field.
`afteropen`	Fired when the drop-down menu is turned on.
`afterclose`	Fired when the drop-down menu is turned off.

Global config

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

A value starting with @@ refers to the relevant field in the multilingual config.

Icon

Name	Description
`expand`	Expand drop-down.
`collapse`	pack up drop-down.
`clear`	clear.
`separator`	separator.

Edit this page on GitHubEdit