el-dropdown 兩個以上el-dropdown互相切換時,第一次active只切換,不展現下拉框,第二次再點擊,才展現下拉框

1.能夠在el-dropdown上設置蒙層使第一次點擊時,點擊觸發在蒙層上,不觸發el-dropdown點擊事件。dom

<template>
    <div id="test">
        <div class="train-tab__item"  @click="tabFeatureList(0)" style="min-width: 135px;height: 40px;float: left">
            <el-dropdown style="cursor: pointer; outline: none;margin-left: -15px;height: 40px;line-height: 40px;"  @command="getList" trigger="click">
                <div id="list">
                    <span class="el-dropdown-link">
                        我是tab1
                    </span>
                </div>

                <el-dropdown-menu slot="dropdown" class="pro-dropdown-menu">
                    <el-dropdown-item
                        v-for="(item, index) in featureList"
                        :divided="index==1"
                        :command="item"
                        :key="item.name + index">
                        {{ item.name }}
                    </el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
            <div style="top: 0; left: -20px;position: absolute; height: 40px; opacity: 0;" v-if="activeIndex != 0">
                <span style="margin-left: 20px; margin-right: 90px;">{{ curFeatureObj.name }}</span>
            </div>
        </div>
        <div class="train-tab__item" :class="{'train-tab__actived': activeIndex == 1}" @click="tabOriginData(1)">
            <span>
                <img src="../../images/origin-dataset.png" class="origin-data-pic">
                <span>我是tab2</span>
            </span>
        </div>
    </div>
</template>
<script>
    export default {
        data () {

        },
        methods: {
            tabFeatureList (tag) {
                this.activeIndex = tag;
            },
            tabOriginData (tag) {
                this.activeIndex = tag;
            },
        }
    }
</script>

2.第二種方式ide

利用點擊時activeIndex更換時dom渲染的規律及順序,使第一次點擊時不展現下拉(因爲activeIndex切換,會把原來的那個dom刪掉,這個過程當中沒有來得及顯示以前的點擊),這個方式不是很穩妥,第一種方式相對好一些this

<template>
    <div id="test">
        <div class="train-tab__item"  @click="tabFeatureList(0)" v-if="activeIndex != 0" style="min-width: 135px;height: 40px;float: left">
                <el-dropdown style="cursor: pointer; outline: none;margin-left: -15px;height: 40px;line-height: 40px;"  @command="getList" trigger="click">
                    <div id="list">
                        <span class="el-dropdown-link">
                            我是tab1
                        </span>
                    </div>

                    <el-dropdown-menu slot="dropdown" class="pro-dropdown-menu">
                        <el-dropdown-item
                            v-for="(item, index) in featureList"
                            :divided="index==1"
                            :command="item"
                            :key="item.name + index">
                            {{ item.name }}
                        </el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
        </div>
        <div class="train-tab__item"  @click="tabFeatureList(0)" v-else style="min-width: 135px;height: 40px;float: left">
                <el-dropdown style="cursor: pointer; outline: none;margin-left: -15px;height: 40px;line-height: 40px;"  @command="getList" trigger="click">
                    <div id="list1">
                        <span class="el-dropdown-link">
                            我是tab1
                        </span>
                    </div>

                    <el-dropdown-menu slot="dropdown" class="pro-dropdown-menu">
                        <el-dropdown-item
                                v-for="(item, index) in featureList"
                                :divided="index==1"
                                :command="item"
                                :key="item.name + index">
                            {{ item.name }}
                        </el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
        </div>
        <div class="train-tab__item" :class="{'train-tab__actived': activeIndex == 1}" @click="tabOriginData(1)">
            <span>
                <img src="../../images/origin-dataset.png" class="origin-data-pic">
                <span>我是tab2</span>
            </span>
        </div>
    </div>
</template>
<script>
    export default {
        data () {

        },
        methods: {
            tabFeatureList (tag) {
                this.activeIndex = tag;
            },
            tabOriginData (tag) {
                this.activeIndex = tag;
            },
        }
    }
</script>
相關文章
相關標籤/搜索