<template>
    <div class="ht-base-cascader-choice-demo">
        <ht-base-cascader :data="data" :render-format="format" style="width: 250px"></ht-base-cascader>
    </div>
</template>

<script>
    export default {
        name: 'HtBaseCascaderChoiceDemo',
        data() {
            return {
                data: [{
                    value: 'beijing',
                    label: '北京',
                    children: [{
                        value: 'dongchengqu',
                        label: '东城区',
                        code:110101
                    },{
                        value: 'xichengqu',
                        label: '西城区',
                        code:110102
                    }]
                },{
                    value: 'shanghai',
                    label: '上海',
                    disabled: true,
                    children: [
                        {
                            value: 'baoshanqu',
                            label: '宝山区',
                            code:110103
                        }
                    ]
                }, {
                    value: 'guangdong',
                    label: '广东',
                    children: [
                        {
                            value: 'guangzhoushi',
                            label: '广州市',
                            children: [
                                {
                                    value: 'tianhequ',
                                    label: '天河区',
                                    code:440106

                                }, {
                                    value: 'fanyuqu',
                                    label: '番禺区',
                                    children: [
                                        {
                                            value: 'nanchunzhen',
                                            label: '南村镇',
                                            code:440113
                                        },{
                                            value: 'shawanzhen',
                                            label: '沙湾镇',
                                            code:440113
                                        }
                                    ]
                                }
                            ]
                        }
                    ],
                }]
            }
        },
        methods: {
            format(labels, selectedData) {
                const index = labels.length - 1;
                const data = selectedData[index] || false;
                if (data && data.code) {
                    return labels[index] + ' - ' + data.code;
                }
                return labels[index];
            }
        }
    }
</script>
<style>
    .ht-base-cascader-choice-demo {

    }
</style>

