Element UI中table-column嵌套el-dropdown导致弹框不显示的问题

2022年8月11日 1323点热度 0人点赞 0条评论

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相关进行覆盖、修改的也没有。目前还未找到具体原因!

帮助教程

提供最新的帮助教程,方便使用。

文章评论