cascader

级联选择组件，默认情况下使用dict-cascader使用，如果字典包配置中有配置componentsPreFix字段，请根据此字段的具体配置值进行前缀修改，如配置了componentsPreFix为Bu, 则使用bu-cascader使用。

复制成功

00:00

组件结构

组件封装结构如下

 <div class="van-cascader-dict van-cell-dict">
    <van-field ref="VanFieldRef"></van-field>
    <van-popup ref="VanPopupRef">
      <van-cascader ref="VanCascaderRef"></van-cascader>
    </van-popup>
 </div>

const VanFieldRef = ref(null)
const getVanFieldRef = () => {
  return VanFieldRef.value
}

const VanCascaderRef = ref(null)
const getVanCascaderRef = () => {
  return VanCascaderRef.value
}

const VanPopupRef = ref(null)
const getVanPopupRef = () => {
  return VanPopupRef.value
}
defineExpose({ getVanFieldRef, getVanCascaderRef, getVanPopupRef })

属性、事件和插槽继承技巧

此组件引用了van-field、van-popup、van-cascader三个组件，其中van-field组件可直接继承原生属性、事件和插槽， van-popup继承属性、事件和插槽时添加 popup- 前缀即可，同理 van-cascader组件则是添加 cascader- 前缀

点击阅读field组件使用文档

点击阅读popup组件使用文档

点击阅读cascader组件使用文档

属性

本组件继承上述使用到的三个vant组件的所有属性、事件及插槽，具体使用请阅读组件相关使用须知

属性	类型	说明	默认值
clearable	Boolean	是否可清除	false
showArrow	Boolean	展示清除按钮时是否展示右边箭头	true
dictType	String, Object	字典类型，传递字典类型选项将渲染该字典类型对应的数据,传递对象时请继续阅读文档	""
disabledObj	Object	用于禁用数据的对象（仅对字典数据有效）,具体用法见下文	null
filterDataFun(list)	function	接收字典类型对应的数据对数据进行过滤处理（仅对字典数据有效）	null
disabledDataFun(item)	function	（仅对字典数据有效）接收的是字典类型对应数据项的具体一项，根据条件进行返回true则是禁用	null
treeData	Array	自定义选项数据，优先级最大，树形结构	null
cascader-field-names	Object	用于格式化数据字段，自定义 treeData 结构中的字段。	见下文
delChildren	Boolean	是否删除自定义数据中叶子节点的空chldren字段	false
keyValue	Boolean	dictChange事件是否返回对象形式	false
maxLevel	string，number	可以选择的最大层级，配置为1时 将过滤成只有一级的数据	无
minLevel	string，number	最少必须选择第几层的数据，否则错误提示据	无
lastLevel	Boolean	是否必须选择到最后一级数据	false
tips	string	配置提示语	无
showTipsFun(msg)	function	上述层级选择错误提示时的回调方法 ，优先级最高	无
spacer	string	选择数据后页面数据之间的间隔符	/
showValueFun(arr,spacer)	function	自定义选中数据后的显示逻辑，优先级最高	无
finish	Boolean	是否选中最后一级时自动触发选择数据	false
defaultValv1.1.0	string	有modelValue没值时的缺省代替显示值，默认为null	null
openDefaultValJudgev1.1.0	boolean	是否当项目不可选时才显示defaultVal	true

cascader-field-names默认值

{
 text: "text",
 value: "value",
 children: "children"
}

注意

此配置是供自定义数据进行格式化时使用，无配置disabled字段，如需禁用数据，请现行把需要禁用的数据的value字段添加disabled字段。 若自定义数据字段与字典数据字段配置一致，也可不用配置此字段。

字典数据无需此配置，且禁用选项等均由全局配置，如此字典数据比较特殊与全局字典配置的不一致，也可进行配置cascader-field-names，disabled则无法配置。

dictType为对象类型时

拥有下列属性

字段	类型	说明	默认值
type	string	对应字典类型	""
filters	string,array	过滤掉的数据，多个且为字符串类型时使用英文逗号分隔	""
filterType	string	上述配置的filters根据哪个字段过滤	字典包配置中的format.value
reverse	Boolean	false时 则只展示filters配置的值，true时则返选	false

disabledObj配置

拥有下列属性

字段	类型	说明	默认值
disabledValues	string，array	需要禁选的值	""
disabledType	string	上述配置的disabledValues根据什么字段进行禁选	字典包配置中的format.value
reverse	Boolean	false时，配置的值必为禁选，true时，非配置的值必为禁选	false

事件

事件名称	说明
dictChange	选中值时触发此事件，并返回一个值， keyValue为false时返回当前选中值，为true时返回当前选中值的数组对象

注意

注意

data自定义数据优先级大于dictType

field的right-icon插槽配置无效，已被组件占用

disabledDataFun 配置优先级最高，return的值就是disabled的值 配置了disabledDataFun后 disabledObj 将失效

disabledObj 配置优先级最低，优先取原生字典数据的disabled值，原生disabled值为false再取disabledObj的配置，即此配置无法覆盖原生字典数据的disabled为true的值

提示

picker弹出框 顶部栏标题可 直接配置 title属性， cascader-title 和 cascaderTitle 属性 也是有效

picker弹出框 顶部栏取消按钮文字可 直接配置 cancel-button-text 或 cancelButtonText属性， cascader-cancel-button-text 和 cascaderCancelButtonText 属性 也是有效

picker弹出框 顶部栏确认按钮文字可 直接配置 confirm-button-text 或 confirmButtonText属性, cascader-confirm-button-text 和 cascaderConfirmButtonText 属性 也是有效