Baidu DLS

返回 DLS

Cascader 级联器

示例

尺寸

可选的尺寸 ui 属性值:xs/s/m/l

请选择
请选择
请选择
请选择
<template>
<div class="cascader-wrap">
  <veui-cascader
    v-model="value"
    ui="l"
    :options="options"
  />
  <veui-cascader
    v-model="value"
    :options="options"
  />
  <veui-cascader
    v-model="value"
    ui="s"
    :options="options"
  />
  <veui-cascader
    v-model="value"
    ui="xs"
    :options="options"
  />
</div>
</template>

<script>
import { Cascader } from 'veui'

const options = [
  {
    label: '浙江',
    value: '浙江',
    options: [
      {
        label: '威海',
        value: '威海'
      },
      {
        label: '滨州',
        value: '滨州'
      },
      {
        label: '临沂',
        value: '临沂'
      },
      {
        label: '东营',
        value: '东营'
      },
      {
        label: '济南',
        value: '济南'
      }
    ]
  },
  {
    label: '山东',
    value: '山东',
    options: [
      {
        label: '菏泽',
        value: '菏泽',
        options: [
          {
            label: '菏泽1',
            value: '菏泽1'
          }
        ]
      },
      {
        label: '潍坊',
        value: '潍坊',
        options: [
          {
            label: '潍坊1',
            value: '潍坊1'
          }
        ]
      },
      {
        label: '泰山',
        value: '泰山'
      },
      {
        label: '烟台',
        value: '烟台'
      },
      {
        label: '华山',
        value: '华山'
      },
      {
        label: '衡山',
        value: '衡山'
      },
      {
        label: '嵩山',
        value: '嵩山'
      },
      {
        label: '恒山',
        value: '恒山'
      },
      {
        label: '大雪山',
        value: '大雪山'
      }
    ]
  },
  {
    label: '上海',
    value: '上海',
    disabled: true
  },
  {
    label: '北京',
    value: '北京'
  },
  {
    label: '海外',
    value: '海外',
    disabled: true,
    options: [
      {
        label: '日本',
        value: '日本'
      }
    ]
  }
]

export default {
  components: {
    'veui-cascader': Cascader
  },
  data () {
    return {
      value: null,
      options
    }
  }
}
</script>

内联模式

使用 inline 属性来开启内联模式。

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

搜索选项

使用 searchable 属性来开启选项搜索。

请选择
<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 属性来开启多选模式。

请选择
<template>
<article>
  <section class="cascader-config">
    <veui-checkbox ui="s" v-model="clearable2">Clearable</veui-checkbox>
    <veui-checkbox ui="s" v-model="showSelectAll2">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 ui="s" v-model="max2"/>
    </label>
    <label>
      columnWidth:
      <veui-input ui="s" v-model="columnWidth2"/>
    </label>
  </section>
  <veui-cascader
    class="mt-3p"
    v-model="value2"
    :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>

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是否允许搜索选项。
filterfunction-选项过滤函数,签名为 function(option: Object): booleanoption 类型与 options 属性中的项相同。返回值表示是否将结果保留在下拉选项列表中。
expandedboolean=false

.sync

下拉菜单是否展开。

column-triggerhover | clickclick

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

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

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

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

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

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

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

控制选中值如何展示。

描述
complete完整展示选中值的路径,如“中国 > 上海”。
simple仅仅展示选中值文本。
disabledboolean=false是否为禁用状态。
readonlyboolean=false是否为只读状态。
overlay-classstring|Array|Object=-参考 Overlay 组件的 overlay-class 属性

插槽

名称描述
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分隔符。