Cascader 级联选择器

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

使用指南

在 page.json 中引入组件

{
    "navigationBarTitleText": "Cascader",
    "usingComponents": {
        "wux-cell-group": "../../dist/cell-group/index",
        "wux-cell": "../../dist/cell/index",
        "wux-cascader": "../../dist/cascader/index"
    }
}

示例

<wux-cascader visible="{{ visible1 }}" default-value="{{ value1 }}" title="所在地区" options="{{ options1 }}" bind:close="onClose1" bind:change="onChange1" />
<wux-cascader visible="{{ visible2 }}" controlled value="{{ value2 }}" title="所在地区" options="{{ options2 }}" bind:close="onClose2" bind:change="onChange2" bind:load="onLoadOptions" />
<view class="page">
    <view class="page__hd">
        <view class="page__title">Cascader</view>
        <view class="page__desc">级联选择器</view>
    </view>
    <view class="page__bd">
        <wux-cell-group title="Cascader">
            <wux-cell title="Default" extra="{{ title1 }}" bind:click="onOpen1"></wux-cell>
            <wux-cell title="Async" extra="{{ title2 }}" bind:click="onOpen2"></wux-cell>
        </wux-cell-group>
    </view>
</view>

import data from './data'
Page({
    data: {
        options1: data,
        value1: [],
        options2: [
            {
                value: 'beijing',
                label: '北京',
                isLeaf: false,
            },
            {
                value: 'hangzhou',
                label: '杭州',
                isLeaf: false,
            },
        ],
        value2: [],
    },
    onOpen1() {
        this.setData({ visible1: true })
    },
    onClose1() {
        this.setData({ visible1: false })
    },
    onChange1(e) {
        this.setData({ title1: e.detail.options.map((n) => n.label).join('/') })
        console.log('onChange1', e.detail)
    },
    onOpen2() {
        this.setData({ visible2: true })
    },
    onClose2() {
        this.setData({ visible2: false })
    },
    onChange2(e) {
        console.log('onChange2', e.detail)
        this.setData({ value2: e.detail.value, title2: e.detail.done && e.detail.options.map((n) => n.label).join('/') })
    },
    onLoadOptions(e) {
        console.log('onLoadOptions', e.detail)
        const { value } = e.detail
        const options2 = [...this.data.options2]
        wx.showLoading({ mask: true })
        setTimeout(() => {
            if (value[value.length - 1] === 'beijing') {
                options2.forEach((n) => {
                    if (n.value === 'beijing') {
                        n.children = [
                            {
                                value: 'baidu',
                                label: '百度'
                            },
                            {
                                value: 'sina',
                                label: '新浪'
                            },
                        ]
                    }
                })
            } else if (value[value.length - 1] === 'hangzhou') {
                options2.forEach((n) => {
                    if (n.value === 'hangzhou') {
                        n.children = [
                            {
                                value: 'ali',
                                label: '阿里巴巴'
                            },
                            {
                                value: '163',
                                label: '网易'
                            },
                        ]
                    }
                })
            }
            wx.hideLoading()
            this.setData({ value2: value, options2 })
        }, 1000)
    },
})

// 简单的数据格式如下
[{
    'label': '北京',
    'value': '110000',
    'children': [{
        'label': '北京市',
        'value': '110000',
        'children': [{
            'label': '东城区',
            'value': '110101',
        }],
    }],
}, {
    'label': '上海',
    'value': '310000',
    'children': [{
        'label': '上海市',
        'value': '310000',
        'children': [{
            'label': '黄浦区',
            'value': '310101',
        }]
    }],
}]

视频演示

Cascader

API

Cascader props

Cascader externalClasses