注： 由于此组件基于 create-api 实现，所以在使用之前，请确保自己了解过 。

    • 基本用法

    相比普通选择器，级联选择器需要传入的数据结构是不一样的。普通选择器的数据结构是一个二维数组，每一列对应一个固定的数组，而级联选择器，则需要传入的是一个树形结构，第一列数组的每个选项的children属性，对应着切换到该选项时后续列的数据，从而实现对后续列的改变。如下所示：

    @click="showCascadePicker">Cascade Picker

    const cascadeData = [
    {
    value: 'Fruit',
    text: 'Fruit',
    children: [
    {
    value: 'Apple',
    text: 'Apple',
    children: [{ value: 1, text: 'One' }, { value: 2, text: 'Two' }]
    },
    {
    value: 'Orange',
    text: 'Orange',
    children: [{ value: 3, text: 'Three'}, { value: 4, text: 'Four' }]
    }
    ]
    },
    {
    value: 'Drink',
    text: 'Drink',
    children: [
    {
    value: 'Coffee',
    text: 'Coffee',
    children: [{ value: 1, text: 'One' }, { value: 2, text: 'Two' }]
    },
    {
    value: 'Tea',
    text: 'Tea',
    children: [{ value: 1, text: 'One' }, { value: 3, text: 'Three'}]
    }
    ]
    }
    ]
    export default {
    mounted () {
    this.cascadePicker = this.- createCascadePicker({
    title: 'Cascade Picker',
    data: cascadeData,
    selectedIndex: [0, 1, 0],
    onSelect: this.selectHandle,
    onCancel: this.cancelHandle
    })
    },
    methods: {
    showCascadePicker() {
    this.cascadePicker.show()
    },
    selectHandle(selectedVal, selectedIndex, selectedText) {
    this.- createDialog({
    type: 'warn',
    content: Selected Item: <br/> - value: - {selectedVal.join(&#39;, &#39;)} <br/> - index: - {selectedIndex.join(&#39;, &#39;)} <br/> - text: - {selectedText.join(&#39; &#39;)},
    icon: 'cubeic-alert'
    }).show()
    },
    cancelHandle() {
    this.- createToast({
    type: 'correct',
    txt: 'Picker canceled',
    time: 1000
    }).show()
    }
    }
    }

    当第一列选中Fruit时，第二列的选项是Apple、Orange。以此类推，当第二列选中Orange时，第三列的选项是Three、Four。

    • 地址选择器

    对于地址选择器，只需要构造出级联选择器的数据结构传入就可以了。

    import { provinceList, cityList, areaList } from 'example/data/area'

    const addressData = provinceList
    addressData.forEach(province => {
    province.children = cityList[province.value]
    province.children.forEach(city => {
    city.children = areaList[city.value]
    })
    })

    export default {
    mounted () {
    this.addressPicker = this.- createCascadePicker({
    title: 'City Picker',
    data: addressData,
    onSelect: this.selectHandle,
    onCancel: this.cancelHandle
    })
    },
    methods: {
    showAddressPicker() {
    this.addressPicker.show()
    },
    selectHandle(selectedVal, selectedIndex, selectedText) {
    this.- createDialog({
    type: 'warn',
    content: Selected Item: <br/> - value: - {selectedVal.join(&#39;, &#39;)} <br/> - index: - {selectedIndex.join(&#39;, &#39;)} <br/> - text: - {selectedText.join(&#39; &#39;)},
    icon: 'cubeic-alert'
    }).show()
    },
    cancelHandle() {
    this.- createToast({
    type: 'correct',
    txt: 'Picker canceled',
    time: 1000
    }).show()
    }
    }
    }

    • 实例方法 setData

    setData方法，用于重置CascadePicker实例的数据和选中的索引。

    @click="showSetDataPicker">SetData Picker

    export default {
    mounted () {
    this.setDataPicker = this.- createCascadePicker({
    title: 'Set Data',
    onSelect: this.selectHandle,
    onCancel: this.cancelHandle
    })
    },
    methods: {
    showSetDataPicker() {
    // setData when the picker is invisible.
    this.setDataPicker.setData(cascadeData)

    • 异步加载数据

    当数据量太大时，可能难以在最开始就生成完整的级联数据树。这时，你可以配置 async 属性开启异步加载级联数据，在 change 事件时，去更新数据，并且在你更新完数据之前，用户点击确认会是无效的。

    @click="showAsyncPicker">Async Load Data

    import { provinceList, cityList, areaList } from 'example/data/area'

    const asyncData = provinceList
    const asyncSelectedIndex = [0, 0, 0]
    asyncData[0].children = cityList[asyncData[0].value]
    asyncData[0].children[0].children = areaList[asyncData[0].children[0].value]

    export default {
    mounted () {
    this.asyncPicker = this.- createCascadePicker({
    title: 'Async Load Data',
    async: true,
    data: asyncData,
    selectedIndex: asyncSelectedIndex.slice(),
    onSelect: this.selectHandle,
    onCancel: this.cancelHandle,
    onChange: this.asyncChangeHandle
    })
    },
    methods: {
    asyncChangeHandle(i, newIndex) {
    if (newIndex !== asyncSelectedIndex[i]) {
    asyncSelectedIndex[i] = newIndex
    // If the first two column is changed, request the data for rest columns.
    if (i < 2) {
    // Mock async load.
    setTimeout(() => {
    if (i === 0) {
    const current = asyncData[newIndex]
    current.children = current.children || cityList[current.value]
    current.children[0].children = current.children[0].children || areaList[current.children[0].value]
    asyncSelectedIndex[1] = 0
    asyncSelectedIndex[2] = 0
    }

    1.         if (i === 1) {
    2.           const current = asyncData[asyncSelectedIndex[0]].children[newIndex]
    3.           asyncSelectedIndex[2] = 0
    4.         }
    5.         this.asyncPicker.setData(asyncData, asyncSelectedIndex)
    6.       }, 500)
    8.   }
    9. },
    10. selectHandle(selectedVal, selectedIndex, selectedText) {
    11.   this.- createDialog({
    12.     type: &#39;warn&#39;,
    13.     icon: &#39;cubeic-alert&#39;
    14.   }).show()
    15. },
    17.   this.- createToast({
    18.     type: &#39;correct&#39;,
    19.     txt: &#39;Picker canceled&#39;,
    20.     time: 1000
    21.   }).show()
    22. }

    }
    }

    https://didi.github.io/cube-ui/#/zh-CN/docs/cascade-picker