<template>
    <div class="ht-base-select-cascader-demo">
        <ht-base-select v-model="province" style="width: 120px" @on-change="handleProvinceChange">
            <ht-base-option v-for="(item, i) in provinceData" :value="item" :key="i">{{item}}
            </ht-base-option>
        </ht-base-select>
        <ht-base-select v-model="secondCity" style="width: 120px;margin-left: -4px">
            <ht-base-option v-for="(city, i) in cityData[province]" :value="city" :key="i">{{city}}</ht-base-option>
        </ht-base-select>
    </div>
</template>

<script>

    export default {
        name: 'HtBaseSelectCascaderDemo',
        data() {
            return {
                province: 'Zhejiang',
                secondCity: 'Hangzhou',
                provinceData: ['Zhejiang', 'Jiangsu'],
                cityData: {
                    Zhejiang: ['Hangzhou', 'Ningbo', 'Wenzhou'],
                    Jiangsu: ['Nanjing', 'Suzhou', 'Zhenjiang'],
                }
            }
        },
        methods: {
            handleProvinceChange(value) {
                this.secondCity = this.cityData[value][0]
            }
        }
    }
</script>
<style lang="less">
    .ht-base-select-cascader-demo {
        .ht-base-select{
            /deep/ .ivu-select-selection:hover {
                z-index: 1;
            }

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

