Cascader

Demo

Size

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

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

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.

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

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

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

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

NameTypeDefaultDescription
uistring=-

preset style.

valueDescription
xsUltra small size.
sSmall size.
mMedium size.
lLage size.
optionsArray<Object>-

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

NameTypeDescription
labelstringTextual description of the option.
value*The value corresponding to the option.
positionstringHow to display subordinate nodes, pop up by default, set inline to display inline.
optionsArray<Object>=An array of options' sub-options, the array item type is the same as the options property array item.
disabledboolean=Whether the option is disabled.
valueArray<*>|*-

v-model

Selected value.

multiplebooleanfalseAllow multiple selections.
inlinebooleanfalseWhether the drop-down panel is displayed inline.
maxnumber-The maximum number of items allowed to be selected when multiple selections are made.
placeholderstringcascader.placeholderPlaceholder text when not selected.
clearablebooleanfalseClear selections.
searchablebooleanfalseSearch options.
expandedboolean=false

.sync

Whether the drop-down menu is expanded.

column-triggerhover | clickclick

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

ValueDescription
hoverThe cursor hovers to expand the next.
clickThe cursor click to expand the next.
select-mode'leaf-only' | 'any'any

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

ValueDescription
leaf-onlyOnly leaf nodes can be selected.
anyEach nodes can be selected.
column-widthnumber | 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-allbooleanfalseIn multiple selection mode is there a select all button.
value-display'complete' | 'simple'simple

Controls how the selected value is displayed style.

ValueDescription
completeA path that fully displays the selected value, such as "Hollywood > Disneyland Park".
simpleOnly display the selected value text.
disabledboolean=falseWhether is it disabled state.
readonlyboolean=falseWhether is it readonly state.
overlay-classstring | Array | Object=-See the overlay component's overlay-class property.
overlay-stylestring | 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

NameDescription
trigger

The entire pull down trigger area.

Default content: drop-down button.

NameTypeDescription
value*Selected value.
selectedObjectSelected object.
expandedbooleanWhether drop-down panel expane.
keywordstringSearch value.
selectfunction(option: Object): voidUse to set options.
togglefunction(force: boolean): voidUse to toggle the expanded state of the drop-down menu.
clearfunction(): voidUse to clear selected options.
removefunction(option: Object): voidUse to remove a option, the parameter option is the option.
updateKeywordfunction(keyword: string): voidUse to modify selected value.
paneContent slot in drop-down panel. As trigger slot with domain parameter.
beforeThe content before the list of options. No default content. The scope parameter is the as the trigger slot.
afterThe 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.

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

NameTypeDescription
labelstringSelected text.
value*Selected value.
checkedbooleanWhether selected a certain value。
disabledboolean=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.

NameTypeDescription
optionObjectCurrent option.
selectfunction(option: Object): voidSelected current option.
expandfunction(option: Object): voidExpand current option.
clickfunction(option: Object): voidClick 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.

NameTypeDescription
labelstringOption text.
value*Option value.
checkedbooleanWhether already option.
disabledboolean=Whether option disable.
NameTypeDescription
selectedArray<Object>Array of selected item data.

Events

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

afteropenFired when the drop-down menu is turned on.
aftercloseFired when the drop-down menu is turned off.

Global config

Config itemTypeDefaultDescription
cascader.placeholderstring@@cascader.placeholderPlaceholder content when not selected.

Icon

NameDescription
expandExpand drop-down.
collapsepack up drop-down.
clearclear.
separatorseparator.
Edit this page on GitHubEdit