<template>
    <div v-for="item in list">
        <Cascader :data="data" change-on-select :render-format="format"></Cascader>
    </div>
    <i-button @click="add">add</i-button>
    <i-button @click="remove">remove</i-button>
</template>
<script>
    export default {
        data () {
            return {
                list: [
                    {
                        a: 1
                    }
                ],
                data: [{
                    value: 'beijing',
                    label: '北京',
                    children: [
                        {
                            value: 'gugong',
                            label: '故宫'
                        },
                        {
                            value: 'tiantan',
                            label: '天坛'
                        },
                        {
                            value: 'wangfujing',
                            label: '王府井'
                        }
                    ]
                }, {
                    value: 'jiangsu',
                    label: '江苏',
                    children: [
                        {
                            value: 'nanjing',
                            label: '南京',
                            children: [
                                {
                                    value: 'fuzimiao',
                                    label: '夫子庙'
                                }
                            ]
                        },
                        {
                            value: 'suzhou',
                            label: '苏州',
                            children: [
                                {
                                    value: 'zhuozhengyuan',
                                    label: '拙政园'
                                },
                                {
                                    value: 'shizilin',
                                    label: '狮子林'
                                }
                            ]
                        }
                    ]
                }]
            }
        },
        methods: {
            add () {
                this.list.push({
                    a: 2
                })
            },
            remove () {
                this.list.splice(0, 1);
            },
            format (labels) {
                return labels.join(' - ');
            }
        }
    }
</script>
