<template>
    <div class="ht-base-input-select-cascader-demo">

        <ht-base-select style="width:100px">
            <ht-base-option v-for="item in list" :value="item.value" :key="item.value">{{ item.label }}</ht-base-option>
        </ht-base-select>
        <ht-base-cascader style="width:200px;display: inline-block;margin-left: -4px" :data="data" v-model="value1">
        </ht-base-cascader>

    </div>
</template>

<script>
    export default {
        name: 'HtBaseInputSelectCascaderDemo',
        data() {
            return {
                list: [
                    {
                        value: '1',
                        label: '张三'
                    },
                    {
                        value: '2',
                        label: '李四'
                    }
                ],
                value1: [],
                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: '狮子林',
                                }
                            ]
                        }
                    ],
                }]
            }
        }
    }
</script>
<style lang="less">
    .ht-base-input-select-cascader-demo {
        .ht-base-select {
            /deep/ .ivu-select-selection:hover {
                z-index: 1;
            }

            /deep/ .ivu-select-selection:focus {
                z-index: 1;
            }
        }
    }
</style>

