Cascader 级联选择器，用于一组相关联的数据集合进行选择，例如省市区等。

支持平台

App（vue）	App（nvue）	H5	小程序
✓	✓	✓	✓

代码演示

部分示例演示，完整使用请参考文档API。

基础使用

通过 options 属性设置选择数据，@complete 为选择完成时触发事件（无下一级表示选择完成）。

<wui-cascader :options="options" @complete="complete"></wui-cascader>

//data数据参考示例程序data.ts
import data from './data';
const options = ref<any>(data.options);
const complete = e => {
    console.log(e);
    Toast(`您的选择为：${e.text.join('')}`);
};

设置默认选项

通过 options 属性设置选择数据，value 属性设置默认选项。

<wui-cascader :options="options" :value="value" @complete="complete"></wui-cascader>

//data数据参考示例程序data.ts
import data from './data'
const options = ref(data.options)
const value = ref(["440000", "440200", "440202", "44020203"])
const complete = (e)=> {
    console.log(e)
}

逐级请求数据

通过 stepLoading 属性设置是否为逐级请求数据，options 属性设置第一级数据，@change 为点击item项时触发事件，返回选择数据去请求下一级数据。 通过 ref 属性来注册组件引用信息。注册完成后，我们可以通过this.$refs.XXX访问到对应的组件实例，并调用上面的实例方法。

<wui-cascader stepLoading ref="cascader1" :options="layer1" @change="change" @complete="complete"></wui-cascader>

//data数据参考示例程序data.ts
//分级加载时，设置第一级数据
import data from './data'
const layer1 = ref<any>(data.layer_0);

const cascader1 = ref<any>('');
const change = e => {
    //默认返回的为约定数据，其他属性可自行扩展
    console.log(e);
    //当前点击item所在层级
    let layer = e.layer;
    //当前点击item索引值
    let index = e.index;
    //value值
    let val = e.value;
    //...

    //获取下一级数据，此处为模拟，省略请求
    uni.showLoading();
    setTimeout(() => {
        //设置请求返回数据
        //当无数据时设置空数组，则会触发@complete事件，表示完成选择（或者调用end方法）
        // if (layer === 5) {
        // 	//如果层级已知，可直接判断，结束选择
        // 	cascader1.value.end();
        // 	return
        // }
        uni.hideLoading();
        cascader1.value.setRequestData(data[`layer_${layer + 1}`], layer);
    }, 300);
};
complete(e) {
    console.log(e)
}

逐级请求数据/设置默认选项

通过 stepLoading 属性设置是否为逐级请求数据，options 属性设置所有级默认数据，value 属性设置默认值，@change 为点击 item 项时触发事件，返回选择数据去请求下一级数据。 通过 ref 属性来注册组件引用信息。注册完成后，我们可以通过 this.$refs.XXX 访问到对应的组件实例，并调用上面的实例方法。

<wui-cascader stepLoading :options="layerData" :value="value" ref="cascader2" @change="change" @complete="complete"></wui-cascader>

const cascader2 = ref<any>('');
  const change2 = e => {
    //默认返回的为约定数据，其他属性可自行扩展
    console.log(e);
    //当前点击item所在层级
    let layer = e.layer;
    //当前点击item索引值
    let index = e.index;
    //value值
    let val = e.value;
    //...

    //获取下一级数据，此处为模拟，省略请求
    uni.showLoading();
    setTimeout(() => {
      //设置请求返回数据
      //当无数据时设置空数组，则会触发@complete事件，表示完成选择（或者调用end方法）
      // if (layer === 5) {
      // 	//如果层级已知，可直接判断，结束选择
      // 	cascader2.value.end();
      // 	return
      // }
      uni.hideLoading();
      cascader2.value.setRequestData(data[`layer_${layer + 1}`], layer);
    }, 300);
  };
const complete = e => {
    console.log(e);
    Toast(`您的选择为：${e.text.join('')}`);
};

Slots

插槽名称	说明
-	-

Props

属性名	类型	说明	默认值	平台差异说明
options	Array	选项数据，具体格式建下方说明	[ ]	-
value	Array	默认值，value或text集合	[ ]	-
defaultKey	String	默认值key，可选值：value、text，根据value属性决定传值	value	-
stepLoading	Boolean	是否逐级请求加载数据，为false则一次性设置所有数据	false	-
showBorder	Boolean	是否显示头部底部边框	true	-
borderColor	String	边框颜色	#eee	-
headHeight	Number, String	头部高度，单位rpx	88	-
headBackground	String	头部背景色	#FFFFFF	-
text	String	未选则时默认显示文本	请选择	-
size	Number, String	头部文字大小，单位rpx	28	-
color	String	头部文字颜色	#181818	-
activeColor	String	高亮颜色,包括头部当前选项卡文本，底部线条，对号✓高亮色	#465CFF	非Nvue端默认为空，可使用css变量（--wui-color-primary）来改变颜色
showLine	Boolean	选项卡文本是否显示底部线条	true	-
height	Number, String	选择（内容）区域高度，单位rpx	600	-
background	String	选择（内容）区域背景颜色	#FFFFFF	-
checkMarkColor	String	对号颜色，为空则默认使用activeColor	-	-
imgWidth	Number, String	选择内容item项图片宽度，单位rpx	48	-
imgHeight	Number, String	选择内容item项图片高度，单位rpx	48	-
radius	Number, String	选择内容item项图片圆角值，单位rpx	0	-
textSize	Number, String	选择内容item项文本字体大小，单位rpx	26	-
textColor	String	选择内容item项文本字体颜色	#181818	-
textActiveColor	String	选择内容item项文本选中时字体颜色	#181818	-