el-dropdown 两个以上el-dropdown互相切换时,第一次active只切换,不展示下拉框,第二次再点击,才展示下拉框
1.可以在el-dropdown上设置蒙层使第一次点击时,点击触发在蒙层上,不触发el-dropdown点击事件。
<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.第二种方式
利用点击时activeIndex更换时dom渲染的规律及顺序,使第一次点击时不展示下拉(由于activeIndex切换,会把原来的那个dom删掉,这个过程中没有来得及显示之前的点击),这个方式不是很稳妥,第一种方式相对好一些
<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>

浙公网安备 33010602011771号