百度智能小程序 级联组件

cascade 级联组件

解释：多级选择组件，为开发者提供级联选择功能，默认为三级。比如：省/市/区。该组件包括左侧标签栏，以及右侧多个 picker（从底部弹起的滚动选择器）。支持配置左侧标签宽度，并提供自定义样式，可供开发者进行定制。

属性说明

示例 

在开发者工具中打开

代码示例

<!--四字标题-->
<smt-cascade
    range="{{multiArray1}}"
    label="四字标题"
    range-key="name"
    bind:change="change"
    placeholder="{{['请选择省', '请选择市', '请选择区']}}"
></smt-cascade>
<!--配置无下边框-->
<smt-cascade
    range="{{multiArray2}}"
    label="无下边框""
    range-key="name"
    noborder="true"
    bind:change="change"
></smt-cascade>
<!--配置label-width-->
<smt-cascade
    range="{{multiArray3}}"
    label="六字标题排版"
    range-key="name"
    label-width="6em"
    bind:change="change"
    placeholder="{{['请选择省', '请选择市', '请选择区']}}"
></smt-cascade>
<!--配置tips-->
<smt-cascade
    range="{{multiArray4}}"
    label="配置未点击时提示"
    range-key="name"
    bind:change="change"
    tips="{{['请选择省', '请选择市', '请选择区']}}"
></smt-cascade>
<!--配置回填数据-->
<smt-cascade
    range="{{multiArray5}}"
    label="回填"
    value="{{[1, 2, 1]}}"
    range-key="name"
    bind:change="change"
    placeholder="{{['请选择省', '请选择市', '请选择区']}}"
></smt-cascade>
<!--配置禁用-->
<smt-cascade
    range="{{multiArray6}}"
    label="禁用型"
    range-key="name"
    disabled
    bind:change="change"
    placeholder="{{['请选择省', '请选择市', '请选择区']}}"
></smt-cascade>
<!--外部样式类-->
<smt-cascade
    range="{{multiArray7}}"
    label="externalClasses"
    cascade-picker="cascade-picker"
    cascade-label="cascade-label"
    cascade-content="cascade-content"
    cascade-picker-content="cascade-picker-content"
    range-key="name"
    bind:change="change"
    placeholder="{{['请选择省', '请选择市', '请选择区']}}"
></smt-cascade>

// 初始化级联组件数组内容
const initMultiArray = [
    [
        {
            name: '北京市',
            value: 1
        },
        {
            name: '山西省',
            value: 2
        },
        {
            name: '黑龙江省',
            value: 3
        }
    ],
    [],
    []
];
// 整个级联组件数组内容
const multiArray = [
    {
        name: '北京市',
        value: 1,
        children: [{
            name: '北京市',
            value: 1,
            children: [{
                name: '海淀区',
                value: 1
            }, {
                name: '大兴区',
                value: 2
            }, {
                name: '朝阳区',
                value: 3
            }]
        }]
    },
    {
        name: '山西省',
        value: 2,
        children: [{
            name: '太原市',
            value: 1,
            children: [
                {
                    name: '小店区',
                    value: 1
                }, {
                    name: '迎泽区',
                    value: 2
                }, {
                    name: '杏花岭区',
                    value: 3
                }
            ]
        }, {
            name: '大同市',
            value: 2,
            children: [{
                name: '南郊区',
                value: 1
            }, {
                name: '新荣区',
                value: 2
            }, {
                name: '阳高区',
                value: 3
            }]
        }, {
            name: '吕梁市',
            value: 3,
            children: [{
                name: '孝义市',
                value: 1
            }, {
                name: '离石市',
                value: 2
            }, {
                name: '汾阳市',
                value: 3
            }]
        }]
    },
    {
        name: '黑龙江省',
        value: 3,
        children: [{
            name: '哈尔滨市',
            value: 1,
            children: [{
                name: '道里区',
                value: 1
            }, {
                name: '南岗区',
                value: 2
            }, {
                name: '太平区',
                value: 3
            }]
        }, {
            name: '齐齐哈尔市',
            value: 2,
            children: [{
                name: '龙沙区',
                value: 1
            }, {
                name: '建华区',
                value: 2
            }, {
                name: '铁锋区',
                value: 3
            }]
        }, {
            name: '大庆市',
            value: 3,
            children: [{
                name: '龙凤区',
                value: 1
            }, {
                name: '红岗区',
                value: 2
            }, {
                name: '林甸县',
                value: 3
            }]
        }]
    }
];
/* global Page, swan */
Page({ // eslint-disable-line
    data: {
        // 级联选择数组
        multiArray1: initMultiArray,
        multiArray2: initMultiArray,
        multiArray3: initMultiArray,
        multiArray4: initMultiArray,
        multiArray6: initMultiArray,
        multiArray7: initMultiArray,
        // 回填数据
        multiArray5: [
            [{
                name: '山西省',
                value: 1
            }],
            [{
                name: '太原市',
                value: 1
            }, {
                name: '大同市',
                value: 2
            }, {
                name: '吕梁市',
                value: 3
            }],
            [{
                name: '小店区',
                value: 1
            }, {
                name: '迎泽区',
                value: 2
            }, {
                name: '杏花岭区',
                value: 3
            }]
        ],
        // 占位文案
        placeholder: ['请选择省', '请选择市', '请选择区'],
        // 提示文案
        tips: ['请选择省', '请选择市', '请选择区'],
        // 是否更改label颜色
        changeLabelColor: true,
        // 需要更改的颜色，配合changeLabelColor: true使用
        labelColor1: '#2772fb',
        labelColor2: '#f7534f'
    },

    /**
    * 动态设置当前点击的是第几个级联组件
    *
    * @param {Object} event 点击对象
    */
    bindtap(event) {
        const index = event.currentTarget.dataset.index;
        this.setData({
            currentIndex: index
        });
    },

    /**
    * value 改变时触发 change 事件
    *
    * @param {Object} event picker选择对象
    */
    change(event) {
        const value = event.detail.value;
        const length = value.length;
        if (length > 2) {
            return;
        }
        // 记录是第几个cascade
        const index = this.data.currentIndex;
        const multiArrayKey = `multiArray${[index]}`;
        let multiArrayData = this.data[`multiArray${[index]}`];
        const subArray = multiArray[value[0]].children;
        swan.showLoading({
            title: '正在加载...',
            mask: true
        });
        // 500ms之后，隐藏loading提示，同时更新级联数据
        setTimeout(() => {
            swan.hideLoading();
            multiArrayData[length] = length === 1 ? subArray : subArray[value[1]].children;
            this.setData(multiArrayKey, multiArrayData);
        }, 500);
    }
});

/* 外部样式类 */
.cascade-label,
.cascade-picker-content  {
    color: #6495ed;
}

{
    "usingComponents": {
        "smt-cascade": "@smt-ui/component/src/cascade"
    }
}