zoukankan      html  css  js  c++  java
  • 关于element-ui prpover悬浮弹窗定位问题和不稳定性

    如题:需求使用悬浮弹窗,弹窗内嵌el-tabel表格问题

    1、鼠标悬浮是有时没有弹窗出现

    2、弹窗的定位错乱

    // 表格中嵌套悬浮表格弹窗
    <el-table-column align="center" label="筛选项" width="350">
        <template slot-scope="scope">
        <el-popover placement="top" width="700" trigger="hover">
            <el-table :data="scope.row.screening" border>
              <el-table-column property="id" label="筛选项ID" width="80" align="center"></el-table-column>
              <el-table-column property="text" label="筛选项" width="192" align="center"></el-table-column>
              <el-table-column property="value" label="筛选值" width="400" align="center"></el-table-column>
            </el-table>
            <div slot="reference">
              <div style="100%;height:100%;">
                  <p v-for="(item, index) in scope.row.screening" :key="index">{{item.text}}</p>
              </div>
            </div>
        </el-popover>
        </template>
    </el-table-column>

    如上述代码,标记重点,

    1、错位问题因为弹窗的整体宽度和列宽没有明确标明,因此需要写死,并且显示位置placement 最好是top或者bottom,选择空间预留大的方位

    2、完成第一步基本没有显示失效状态,不放心的话可以将悬浮目标扩大到整个单元格,div style="100%;height:100%;"

  • 相关阅读:
    unittest模块小结
    自定义日志类
    配置文件的简单操作
    自动化框架搭建(一)
    openpyxl一点心得
    关于过滤字符中不同元素小结
    关于传入列表出现元素次数排序题目的一点心得
    Python中*和**的作用(课堂小结)
    Python代码的人机大战(循环嵌套)
    最后期限阅读笔记02
  • 原文地址:https://www.cnblogs.com/cp-cookie/p/13689759.html
Copyright © 2011-2022 走看看