VEUI

VEUI on GitHub
Play!EnglishEN
⌘ K | 全文搜索…

Cascader 级联器

示例

尺寸

可供选用的尺寸 ui 属性值：xs / s / m / l。

请选择
请选择
请选择
请选择
在 GitHub 上编辑此示例编辑
<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 属性来开启内联模式。

请选择
在 GitHub 上编辑此示例编辑
<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 属性来开启选项搜索。

请选择
在 GitHub 上编辑此示例编辑
<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 属性来开启多选模式。

请选择
在 GitHub 上编辑此示例编辑
<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>

选择模式

使用 select-mode 属性来控制在单选模式下哪些项目可以被选中。

请选择
在 GitHub 上编辑此示例编辑
<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>

子项展开时机

使用 column-trigger 属性来控制下拉面板中下级的展开时机。

请选择
在 GitHub 上编辑此示例编辑
<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>

渲染选中值

使用 value-display 属性来控制选中值如何展示。

请选择
在 GitHub 上编辑此示例编辑
<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>

数据项懒加载

配合使用 load 属性和数据项中 lazy 属性来实现数据懒加载。

请选择
在 GitHub 上编辑此示例编辑
<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

属性

名称类型默认值描述
uistring-

预设样式。

值描述
xs超小尺寸样式。
s小尺寸样式。
m中尺寸样式。
l大尺寸样式。
optionsArray<Object>-

选项列表，项目的类型为 {label, value, options, disabled, position, ...}。

名称类型描述
labelstring选项的文字说明。
value*选项对应的值。
positionstring下级节点如何展示，默认弹出，可以设置 inline 来内联显示。
optionsArray<Object>选项的子选项数组，数组项类型同 options 属性数组项。
disabledboolean选项是否为禁用。
valueArray<*>|*-

v-model

已选值。

multiplebooleanfalse是否允许多选。
inlinebooleanfalse下拉面板是否以内联模式展示（展开选项将拆分面板而非向外扩展）。
maxnumber-多选时允许选择的项目上限。
placeholderstringcascader.placeholder未选择时的占位文本。
clearablebooleanfalse是否可以清除已选内容。
searchablebooleanfalse是否允许搜索选项。
expandedbooleanfalse

.sync

下拉菜单是否展开。

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

下拉面板中下级的展开时机。

值描述
hover光标悬浮展开下一级。
click点击展开下一级。
select-mode'leaf-only' | 'any''any'

在单选模式下控制哪些项目可以选中。

值描述
leaf-only只有叶子节点可以选中。
any每一级都可以选中。
column-widthnumber | string-

当下拉面板中有多列时，统一控制除了最后一列之外的列宽度。

当该值是数值或者能转换成数值时，会当成像素值。

show-select-allbooleanfalse在多选模式下是否有全选按钮。
value-display'complete' | 'simple''simple'

控制选中值如何展示。

值描述
complete完整展示选中值的路径，如“中国 > 上海”。
simple仅仅展示选中值文本。
merge-checkedstringkeep-all

选中值的合并策略。当某个节点下的所有子节点都被选中时，可以选择只保留父节点、只保留子节点或都保留。

值描述
keep-all父子节点都会在选中值中。
upwards尽可能往祖先方向合并选中值。
downwards尽可能往后代方向合并选中值。
include-indeterminatebooleanfalse是否将半选状态的节点加入已选项。datasource 节点中的非叶子节点若有部分子孙节点被选中，则为半选状态。
disabledbooleanfalse是否为禁用状态。
readonlybooleanfalse是否为只读状态。
overlay-classstring | Array | Object-参考 Overlay 组件的 overlay-class 属性。
overlay-stylestring | Array | Object-参考 Overlay 组件的 overlay-style 属性。
match(item, keyword, { ancestors }) => boolean | Array<[number, number]>-支持自定义高亮逻辑， 默认大小写不敏感，参考 Autocomplete。
filter(item, keyword, { ancestors, offsets }) => boolean-支持自定义搜索命中逻辑，参考 Autocomplete。
loadFunction-

数据项懒加载，配合数据项上 lazy 属性使用。

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>

parent 参数表示当前需要为该项加载更多数据。

scope 参数表示加载的数据范围。

值描述
descendants加载所有后代数据。
children加载子项数据。

插槽

名称描述
trigger

整个下拉触发区域。

默认内容：下拉按钮。

名称类型描述
value*已选项值。
selectedObject已选项对象。
expandedboolean下拉菜单是否展开。
keywordstring搜索值。
selectfunction(option: Object): void用于设置已选项。
togglefunction(force: boolean): void用于切换下拉菜单展开状态。
clearfunction(): void用于清除已选项。
removefunction(option: Object): void用于删除某个已选项，参数 option 是该已选项。
updateKeywordfunction(keyword: string): void用于修改搜索值。
pane下拉面板中的内容插槽。插槽参数同 trigger 插槽。
before选项列表前的内容。无默认内容。插槽参数同 trigger 插槽。
after选项列表后的内容。无默认内容。插槽参数同 trigger 插槽。
column-before

下拉面板中每列前的区域。无默认内容。

名称类型描述
optionObject该列的父选项，其中 options 属性可以拿到当前列的数据。
column-after下拉面板中每列后的区域。无默认内容。插槽参数同 column-before 插槽。
label

下拉按钮文本区域。

默认内容：已选项对应的 label 属性值或内联模式下已选项的文本内容。

名称类型描述
labelstring已选项文本。
value*已选项值。
checkedboolean是否已选择某个值。
disabledboolean选项是否禁用。

另外，当前选项数据中除了上面描述的字段之外的其它字段也会自动通过 v-bind 进行绑定到插槽参数上。

option-label

下拉选项（不带 options 的选项）的文本区域。

默认内容：选项的 label 属性值。

名称类型描述
optionObject当前选项。
selectfunction(option: Object): void选中当前选项。
expandfunction(option: Object): void展开当前选项。
clickfunction(option: Object): void点击当前选项内容区，会按情况选中和(或)展开当前选项。
option

可供选择的下拉选项的整个区域。

默认内容：Option 内的组件默认结构。

插槽参数同 option-label 插槽。

selected

选中值渲染区域。

默认内容：单选时渲染选中项目的文本；多选时将每个选中项目的标签渲染成Tag。

名称类型描述
labelstring选项文本。
value*选项值。
checkedboolean是否已选择。
disabledboolean选项是否禁用。
名称类型描述
selectedArray<Object>选中项数据的数组。

事件

名称描述
input输入搜索关键词时触发。回调参数为 (value: string)，value 为输入框的 value 值。
select

v-model

选中状态变化后触发，回调参数为 (value: *)。value 为当前已选项 value 字段的值。

afteropen下拉打开后触发。
afterclose下拉关闭后触发。

全局配置

配置项类型默认值描述
cascader.placeholderstring@@cascader.placeholder未选择时的占位内容。

图标

名称描述
expand展开下拉。
collapse收起下拉。
clear清除。
separator分隔符。

自定义样式

名称类型默认值描述
--dls-dropdown-max-display-items<integer>8

下拉选项同时显示的最大项目数，下拉框的最大高度将由此计算得出。

在 GitHub 上编辑此页面编辑
© Baidu, Inc. 2024