Element UI中table-column嵌套el-dropdown导致弹框不显示的问题
Element UI中table-column嵌套el-dropdown导致dropdown组件在鼠标浮动或者点击时,不显示el-dropdown-menu的问题;
第一种:table-column直接嵌入el-dropdown组件
给column添加 <template slot-scope="scope">
<el-table-column> <!-- column --> <template slot-scope="scope"> <el-dropdown> <span class="el-dropdown-link"> 下拉菜单 <i class="el-icon-arrow-down 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-menu> </el-dropdown> </template> </el-table-column>
第二种:table-column header 嵌入el-dropdown组件
给header添加 <div slot-scope="scope" slot="header">
<el-table-column> <!-- column header --> <div slot-scope="scope" slot="header"> <el-dropdown> <span class="el-dropdown-link"> 下拉菜单<i class="el-icon-arrow-down 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-menu> </el-dropdown> </div> <!-- column --> <template slot-scope="scope"> <el-dropdown> <span class="el-dropdown-link"> 下拉菜单<i class="el-icon-arrow-down 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-menu> </el-dropdown> </template> </el-table-column>
Tips:在实际项目中发生了这么一目;同个项目的分支版本,客户私有部署版本header不添加slot-scope="scope"浮框可以正常显示,页面元素层级也是正常的;但是同个另外一个分支的不添加slot-scope="scope"的情况下,浮框是不显示的,并且devtools查看时el-dropdown-menu是一直显示的,并且层级和父级一直是同级;在添加情el-dropdown-menu情况下,浮框是显示的,devtools查看el-dropdown-menu也是一直显示的,但是鼠标浮动初始化显示错误的层级就消失了。两个分支进行了代码比对,当前功能页面两个分支的代码是一模一样的,在有问题的分支全局搜索有对el-dropdown相关进行覆盖、修改的也没有。目前还未找到具体原因!
文章评论