VEUI

VEUI on GitHub
Play!中文

Cascader Cascader

Examples

Size variants

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

请选择
请选择
请选择
请选择
Edit this demo on GitHubEdit
<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.

请选择
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.

请选择
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.

请选择
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.

请选择
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

NameTypeDefaultDescription
uistring-

Predefined style.

ValueDescription
xsExtra small size style.
sSmall size style.
mMedium size style.
lLarge size style.
optionsArray<Object>-

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

NameTypeDescription
labelstringThe textual description of the option.
value*The value corresponding to the option.
positionstringHow to display the sub-nodes. By default, they pop up. You can set inline to display them inline.
optionsArray<Object>The array of sub-options for the option, with the item type being the same as that of the options prop array item.
disabledbooleanWhether the option is disabled.
valueArray<*>|*-

v-model

Selected value.

multiplebooleanfalseWhether multiple options can be selected.
inlinebooleanfalseWhether the dropdown panel is displayed in inline mode (the expanded options will split the panel rather than expanding outwards).
maxnumber-The upper limit of the number of selected items in multiple selection mode.
placeholderstringcascader.placeholderThe placeholder text when no option is selected.
clearablebooleanfalseWhether the selected content can be cleared.
searchablebooleanfalseWhether to allow option search.
expandedbooleanfalse

.sync

Whether the dropdown menu is expanded.

column-trigger'hover' | 'click''click'

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

ValueDescription
hoverExpand the next level when the cursor hovers over it.
clickExpand the next level when clicked.
select-mode'leaf-only' | 'any''any'

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

ValueDescription
leaf-onlyOnly leaf nodes can be selected.
anyEach level can be selected.
column-widthnumber | 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-allbooleanfalseWhether to display the select-all button in multiple selection mode.
value-display'complete' | 'simple''simple'

Controls how the selected value is displayed.

ValueDescription
completeDisplay the complete path of the selected value, such as "China > Shanghai".
simpleOnly display the text of the selected value.
merge-checkedstringkeep-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.

ValueDescription
keep-allBoth parent and child nodes will be included in the selected values.
upwardsMerge the selected values towards ancestors as much as possible.
downwardsMerge the selected values towards descendants as much as possible.
include-indeterminatebooleanfalseWhether 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.
disabledbooleanfalseWhether it is disabled.
readonlybooleanfalseWhether it is read-only.
overlay-classstring | Array | Object-Refer to Overlay component overlay-class prop.
overlay-stylestring | 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.
loadFunction-

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.

ValueDescription
descendantsLoad all descendant data.
childrenLoad the data of child items.

Slots

NameDescription
trigger

The entire area that triggers the dropdown.

Default content: Dropdown button.

NameTypeDescription
value*The value of the selected option.
selectedObjectThe object of the selected option.
expandedbooleanWhether the dropdown menu is expanded.
keywordstringThe search value.
selectfunction(option: Object): voidUsed to set the selected option.
togglefunction(force: boolean): voidUsed to toggle the expanded state of the dropdown menu.
clearfunction(): voidUsed to clear the selected option.
removefunction(option: Object): voidUsed to remove a selected option, where the parameter option is the selected option.
updateKeywordfunction(keyword: string): voidUsed to modify the search value.
paneSlot for the content in the dropdown panel. The scope parameters are the same as those of the trigger slot.
beforeContent before the option list. No default content. The scope parameters are the same as those of the trigger slot.
afterContent 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.

NameTypeDescription
optionObjectThe parent option of this column, where the options property can get the data of the current column.
column-afterThe 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.

NameTypeDescription
labelstringThe text of the selected option.
value*The value of the selected option.
checkedbooleanWhether a value is selected.
disabledbooleanWhether 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.

NameTypeDescription
optionObjectCurrent option.
selectfunction(option: Object): voidSelects the current option.
expandfunction(option: Object): voidExpands the current option.
clickfunction(option: Object): voidClicks 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.

NameTypeDescription
labelstringOption text.
value*Option value.
checkedbooleanWhether it is selected.
disabledbooleanWhether the option is disabled.
NameTypeDescription
selectedArray<Object>An array of selected item data.

Events

NameDescription
inputTriggered 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.

afteropenTriggered after the dropdown is opened.
aftercloseTriggered after the dropdown is closed.

Configs

KeyTypeDefaultDescription
cascader.placeholderstring@@cascader.placeholderThe placeholder content when nothing is selected.

Icons

NameDescription
expandExpand dropdown.
collapseCollapse dropdown.
clearClear selection.
separatorSeparator.

CSS

NameTypeDefaultDescription
--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.

Edit this page on GitHubEdit
© Baidu, Inc. 2024