• 欢迎访问大姚哥前端笔记
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧
  • 欢迎留言o(∩_∩)o 哈哈

vue Element ui 下拉菜单Dropdown设置显示时按钮的状态

Vue dayaoge 2532次浏览

vue Element ui 下拉菜单Dropdown设置显示时按钮的状态

Element ui 下拉菜单Dropdown并没有设置激活时按钮的状态样式。

粘贴图片

可是实际情况往往是这样的:

13523457698029372

点击菜单的时候,按钮有个active样式。

翻了变文档,只看到visible-change事件可以用一下。当显示菜单的时候,该事件返回true,隐藏时返回false。那我们可以根据返回值来动态添加样式。

 

代码:

<el-dropdown  @visible-change="handleVisible" :class="{{activeClass:dropActive}}">
  <span class="el-dropdown-link">
    下拉菜单<i class="el-icon-caret-bottom el-icon--right"></i>
  </span>
  <el-dropdown-menu slot="dropdown">
    <el-dropdown-item>黄金糕</el-dropdown-item>
    <el-dropdown-item>狮子头</el-dropdown-item>
    <el-dropdown-item>螺蛳粉</el-dropdown-item>
    <el-dropdown-item disabled>双皮奶</el-dropdown-item>
    <el-dropdown-item divided>蚵仔煎</el-dropdown-item>
  </el-dropdown-menu>
</el-dropdown>
<script>
  export default {
       data() {
            return {
                 dropActive:false//按钮是否激活
            }
      },
      methods: {
        handleVisible(v) {
              this.dropActive=v;//true or false
        }
    }
  }
</script>

这样的或,下拉菜单就会添加上activeClass样式,我们只需要在style里添加该样式即可。

但如果下拉菜单在列表里,每一项都有一个下拉菜单这该怎么办呢,该怎么设置激活哪个菜单呢?
粘贴图片(1)
我们需要handleVisible的时候传个参数(index)。这样就能找到第几个了。

<el-table
                                ref="multipleTable"
                                :data="list"
                                style="width: 100%">
                            <el-table-column
                                    label="Paper名称">
                                <template scope="scope">
                                    <div class="itemPaperName"> {{ scope.row.name }}

                                        <el-dropdown  @visible-change="handleChangePaper($event,scope.$index)"   :class="{dropActive:scope.row.isDropShow}">
                                    <span class="el-dropdown-link course_menu">
                                        操作
                                    </span>
                                            <el-dropdown-menu slot="dropdown">
                                                <el-dropdown-item @click.native="reNameFolder(scope.$index)">编辑</el-dropdown-item>
                                                <el-dropdown-item @click.native="deleteFolder(scope.$index, paperData)">重命名</el-dropdown-ite
                                            </el-dropdown-menu>
                                        </el-dropdown>
                                    </div>
                                </template>
                            </el-table-column>
                        </el-table>
<script>
  export default {
       data() {
            return {
                list:[
                    {name:"列表1", dropActive:false//按钮是否激活},
                    {name:"列表2", dropActive:false//按钮是否激活}
                ],//数据集合
            }
      },
      methods: {
        handleChangePaper(v,index) {
              this.list[index].dropActive=v;//true or false
        }
    }
  }
</script>

这样的话就可以实现列表下拉高亮了。


小白公园 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权 , 转载请注明vue Element ui 下拉菜单Dropdown设置显示时按钮的状态
喜欢 (5)