<template>
    <div class="ht-base-input-double-dropdown-demo">
        <ht-base-select v-model="project1" style="width:200px">
            <ht-base-option v-for="item in projectList1" :value="item.value" :key="item.value">{{ item.label }}
            </ht-base-option>
        </ht-base-select>
        <ht-base-select v-model="project2" style="width:200px;margin-left: -4px">
            <ht-base-option v-for="item in projectList2" :value="item.value" :key="item.value">{{ item.label }}
            </ht-base-option>
        </ht-base-select>
    </div>
</template>

<script>
    export default {
        name: 'HtBaseInputDoubleDropdownDemo',
        data() {
            return {
                project1: '1',
                project2: '2',
                projectList1: [
                    {
                        value: '1',
                        label: '项目1-1'
                    },
                    {
                        value: '2',
                        label: '项目1-2'
                    }
                ],
                projectList2: [
                    {
                        value: '1',
                        label: '项目2-1'
                    },
                    {
                        value: '2',
                        label: '项目2-2'
                    }
                ],
            }
        }
    }
</script>
<style lang="less">
    .ht-base-input-double-dropdown-demo {
        .ht-base-select {
            /deep/ .ivu-select-selection:hover {
                z-index: 1;
            }

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

