Cascader Cascader

Examples

Size variants

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

请选择

<template>
<div class="cascader-wrap">
  <veui-cascader
    v-model="value"
    class="cascader"
    ui="l"
    :options="options"
  />
  <veui-cascader
    v-model="value"
    class="cascader"
    :options="options"
  />
  <veui-cascader
    v-model="value"
    class="cascader"
    ui="s"
    :options="options"
  />
  <veui-cascader
    v-model="value"
    class="cascader"
    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;
}

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

Inline mode

Use the inline prop to enable inline mode.

Edit this demo 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 demo 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 selection

Use the multiple prop to enable multiple selection mode.

Clearable ShowSelectAll click to expand hover to expand Max:

columnWidth:

Edit this demo 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"
        class="input"
        ui="s"
      />
    </label>
    <label>
      columnWidth:
      <veui-input
        v-model="columnWidth2"
        class="input"
        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;
  }
  .input {
    width: 80px;
  }
}
.mt-3p {
  margin-top: 12px;
}
</style>

Selection mode

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

anyleaf-only

请选择

Edit this demo on GitHubEdit

<template>
<article>
  <section>
    <veui-radio-group
      v-model="selectMode"
      class="group"
      :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>
.group {
  margin-bottom: 20px;
}
</style>

Sub-item expansion timing

Use the column-trigger prop to control the timing of sub-items expansion in the dropdown panel.

clickhover

请选择

Edit this demo on GitHubEdit

<template>
<article>
  <section>
    <veui-radio-group
      v-model="trigger"
      class="group"
      :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>
.group {
  margin-bottom: 20px;
}
</style>

Render selected value

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

simplecomplete

请选择

Edit this demo on GitHubEdit

<template>
<article>
  <section>
    <veui-radio-group
      v-model="valueDisplay"
      class="group"
      :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>
.group {
  margin-bottom: 20px;
}
</style>

Lazy loading of data items

Use the load prop and the lazy property in data items to implement lazy loading of data.

请选择

Edit this demo on GitHubEdit

<template>
<div>
  <veui-cascader
    v-model="value"
    :options="options"
    multiple
    :load="load"
  />
</div>
</template>

<script>
import { Cascader } from 'veui'

const options = [
  {
    label: '浙江',
    value: '浙江',
    options: [
      {
        label: '杭州',
        value: '杭州'
      },
      {
        label: '宁波',
        value: '宁波'
      },
      {
        label: '温州',
        value: '温州'
      },
      {
        label: '舟山',
        value: '舟山'
      },
      {
        label: '绍兴',
        value: '绍兴'
      }
    ]
  },
  {
    label: '上海',
    value: '上海',
    lazy: true
  },
  {
    label: '重庆',
    value: '重庆',
    disabled: true
  },
  {
    label: '北京',
    value: '北京'
  },
  {
    label: '海外',
    value: '海外',
    disabled: true,
    options: [
      {
        label: '日本',
        value: '日本'
      }
    ]
  }
]

const pudongChildren = [
  {
    label: '张江',
    value: '张江'
  },
  {
    label: '北蔡',
    value: '北蔡'
  }
]

const loadShanghai = (descendants) => [
  {
    label: '浦东新区',
    value: '浦东新区',
    lazy: true,
    ...(descendants ? { options: pudongChildren } : null)
  },
  {
    label: '闵行',
    value: '闵行',
    options: [
      {
        label: '莘庄',
        value: '莘庄'
      },
      {
        label: '颛桥',
        value: '颛桥'
      }
    ]
  },
  {
    label: '宝山',
    value: '宝山',
    // load no data
    ...(descendants ? null : { lazy: true })
  },
  {
    label: '徐汇',
    value: '徐汇',
    disabled: true
  }
]

export default {
  components: {
    'veui-cascader': Cascader
  },
  data () {
    return {
      value: null,
      options
    }
  },
  methods: {
    load: ({ parent, scope }) => {
      return new Promise((resolve) => {
        setTimeout(() => {
          let descendants
          switch (scope) {
            case 'children':
              descendants = false
              break
            case 'descendants':
              descendants = true
              break
            default:
              console.warn('Not supported.')
              resolve()
              return
          }

          resolve(
            parent
              ? {
                浦东新区: pudongChildren,
                上海: loadShanghai(descendants)
              }[parent.value]
              : undefined
          )
        }, 1000)
      })
    }
  }
}
</script>

API

Props

Name Type Default Description

ui

string

Predefined style.

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

options

Array<Object>

Option list, with the item type being {label, value, options, disabled, position, ...}.

Name	Type	Description
`label`	`string`	The textual description of the option.
`value`	`*`	The value corresponding to the option.
`position`	`string`	How to display the sub-nodes. By default, they pop up. You can set `inline` to display them inline.
`options`	`Array<Object>`	The array of sub-options for the option, with the item type being the same as that of the `options` prop array item.
`disabled`	`boolean`	Whether the option is disabled.

value

Array<*>|*

v-model

Selected value.

multiple boolean false Whether multiple options can be selected.

inline boolean false Whether the dropdown panel is displayed in inline mode (the expanded options will split the panel rather than expanding outwards).

max number - The upper limit of the number of selected items in multiple selection mode.

placeholder string cascader.placeholder The placeholder text when no option is selected.

clearable boolean false Whether the selected content can be cleared.

searchable boolean false Whether to allow option search.

expanded

boolean

false

.sync

Whether the dropdown menu is expanded.

column-trigger

'hover' | 'click'

'click'

The trigger mode of expanding sub-levels in the dropdown panel.

Value	Description
`hover`	Expand the next level when the cursor hovers over it.
`click`	Expand the next level when clicked.

select-mode

'leaf-only' | 'any'

'any'

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

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

column-width

number | string

Controls the width of columns except the last one when there are multiple columns in the dropdown panel.

If the value is a number or can be converted to a number, it will be treated as a pixel value.

show-select-all boolean false Whether to display the select-all button in multiple selection mode.

value-display

'complete' | 'simple'

'simple'

Controls how the selected value is displayed.

Value	Description
`complete`	Display the complete path of the selected value, such as "China > Shanghai".
`simple`	Only display the text of the selected value.

merge-checked

string

keep-all

The merge strategy of selected values. When all child nodes under a node are selected, you can choose to keep only the parent node, only the child nodes, or both.

Value	Description
`keep-all`	Both parent and child nodes will be included in the selected values.
`upwards`	Merge the selected values towards ancestors as much as possible.
`downwards`	Merge the selected values towards descendants as much as possible.

include-indeterminate boolean false Whether to include nodes in indeterminate state in the selected options. If a non-leaf node in the datasource has some but not all descendant nodes selected, it is in an indeterminate state.

disabled boolean false Whether it is disabled.

readonly boolean false Whether it is read-only.

overlay-class string | Array | Object - Refer to Overlay component overlay-class prop.

overlay-style string | Array | Object - Refer to Overlay component overlay-style prop.

match (item, keyword, { ancestors }) => boolean | Array<[number, number]> - Supports custom highlight logic. By default, it is case-insensitive. Refer to Autocomplete.

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

load

Function

Lazy loading of data items, used in conjunction with the lazy attribute on data items.

type Item {
  label: string,
  value: unknown,
  options?: Array<Item>,
  disabled?: boolean
  lazy?: boolean
}

function load({
  parent?: Item,
  scope: 'descendants' | 'children'
}): Item[] | void | Promise<Item[] | void>

The parent parameter indicates that more data needs to be loaded for that item.

The scope parameter indicates the range of data to be loaded.

Value	Description
`descendants`	Load all descendant data.
`children`	Load the data of child items.

Slots

Name Description

trigger

The entire area that triggers the dropdown.

Default content: Dropdown button.

Name	Type	Description
`value`	`*`	The value of the selected option.
`selected`	`Object`	The object of the selected option.
`expanded`	`boolean`	Whether the dropdown menu is expanded.
`keyword`	`string`	The search value.
`select`	`function(option: Object): void`	Used to set the selected option.
`toggle`	`function(force: boolean): void`	Used to toggle the expanded state of the dropdown menu.
`clear`	`function(): void`	Used to clear the selected option.
`remove`	`function(option: Object): void`	Used to remove a selected option, where the parameter `option` is the selected option.
`updateKeyword`	`function(keyword: string): void`	Used to modify the search value.

pane Slot for the content in the dropdown panel. The scope parameters are the same as those of the trigger slot.

before Content before the option list. No default content. The scope parameters are the same as those of the trigger slot.

after Content after the option list. No default content. The scope parameters are the same as those of the trigger slot.

column-before

The area before each column in the dropdown panel. No default content.

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

column-after The area after each column in the dropdown panel. No default content. The scope parameters are the same as those of the column-before slot.

label

The area for the text of the dropdown button.

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

Name	Type	Description
`label`	`string`	The text of the selected option.
`value`	`*`	The value of the selected option.
`checked`	`boolean`	Whether a value is selected.
`disabled`	`boolean`	Whether an option is disabled.

In addition, any other properties in the current option data will also be automatically bound to the scope parameters via v-bind.

option-label

The text area of the dropdown option (option without options).

Default content: The label property value of the option.

Name	Type	Description
`option`	`Object`	Current 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 area of the current option to select and/or expand it.

option

The entire area of the dropdown option that can be selected.

Default content: The default structure of the component inside Option.

Slot props are the same as the option-label slot.

selected

The rendered area of the selected value.

Default content: When a single option is selected, the text of the selected item is rendered. When multiple options are selected, the labels of each selected item are rendered as Tag.

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

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

Events

Name	Description
`input`	Triggered when the search keyword is entered. The callback parameter is `(value: string)`, where `value` is the value of the input box.
`select`	`v-model` Triggered when the selection state changes. The callback parameter is `(value: *)`, where `value` is the value of the `value` field of the currently selected option.
`afteropen`	Triggered after the dropdown is opened.
`afterclose`	Triggered after the dropdown is closed.

Configs

Key	Type	Default	Description
`cascader.placeholder`	`string`	`@@cascader.placeholder`	The placeholder content when nothing is selected.

Values starting with @@ refer to the corresponding properties from the multi-language configuration.

Icons

Name	Description
`expand`	Expand dropdown.
`collapse`	Collapse dropdown.
`clear`	Clear selection.
`separator`	Separator.

CSS

Name	Type	Default	Description
`--dls-dropdown-max-display-items`	`<integer>`	`8`	The maximum number of items simultaneously displayed in the dropdown options. The maximum height of the dropdown box will be calculated based on this value. Needs to be set through the `overlay-style` prop.

Edit this page on GitHubEdit