Element-UI中el-table内嵌el-popover,在表格翻页后el-popover无法显示问题解决

这篇具有很好参考价值的文章主要介绍了Element-UI中el-table内嵌el-popover,在表格翻页后el-popover无法显示问题解决。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

由于开发需求,需要在el-table某一列增加popover弹窗,当用户点击按钮时,通过popover组件展示详细信息。参考Element-ui官网文档案例,得出代码如下

<el-table-column prop="sip,sip_location" label="源IP" width="150">
 <template slot-scope="scope">
    <div>
      {{ scope.row.sip }}
      <el-popover
        placement="right"
        width="500px"
        :visible="IPDetailsPop"
        popper-class="IPDetailsPopover"
      >
        <IPDetails ref="ipdetails" :info="info"/>
        <el-button
          type="text"
          icon="el-icon-search"
          slot="reference"
          @click="toggleIPDetailsDialog(scope.$index,'sip')"
        >
        </el-button>
      </el-popover>
    </div>
    <div v-for="item in scope.row.sip_location" :key="item">
       <div style="margin-bottom:2px">
        <el-tag effect="dark" color="#199fc7" size="mini" span="2" style="width:100%">{{
          item
        }}</el-tag>
      </div> 
    </div>
  </template>
</el-table-column>

Element-UI中el-table内嵌el-popover,在表格翻页后el-popover无法显示问题解决

具体实现细节无需关注,经过测试后表格第一页的popover组件能够正常显示,但是当翻到第二页时,点击详情按钮,函数能够被正常执行,数据也按照指定格式解析,但是popover组件无法显示。此时返回到第一页后,第一页的popover组件也无法显示了。
参考文章(https://juejin.cn/post/7200571354927939645#comment)中对组件复用问题的描述与解释,在el-popover添加v-if判断条件成功将问题解决,即当没有详细数据要展示的时候,不渲染popover组件。文章来源地址https://www.toymoban.com/news/detail-511093.html

<el-table-column prop="sip,sip_location" label="源IP" width="150">
 <template slot-scope="scope">
    <div>
      {{ scope.row.sip }}
      <el-popover
        placement="right"
        width="500px"
        :visible="IPDetailsPop"
        v-if="Object.keys(scope.row.sip_add).length>0"
        popper-class="IPDetailsPopover"
      >
        <IPDetails ref="ipdetails" :info="info"/>
        <el-button
          type="text"
          icon="el-icon-search"
          slot="reference"
          @click="toggleIPDetailsDialog(scope.$index,'sip')"
        >
        </el-button>
      </el-popover>
    </div>
    <div v-for="item in scope.row.sip_location" :key="item">
       <div style="margin-bottom:2px">
        <el-tag effect="dark" color="#199fc7" size="mini" span="2" style="width:100%">{{
          item
        }}</el-tag>
      </div> 
    </div>
  </template>
</el-table-column>

到了这里,关于Element-UI中el-table内嵌el-popover,在表格翻页后el-popover无法显示问题解决的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • css-修改element ui的el-popover样式

    背景: 在选择所属部门(部门可新建,则部门会很多)时,如果部门特别多的情况下,在下拉选择时,el-popover弹出框会变得很长很长,页面不美观。  产品要求: 在超长时,固定高度,支持滚动条。 在代码里修改样式时,一直不生效,仔细查看dom才发现, popover的dom创建在

    2024年02月15日
    浏览(44)
  • [element-ui] el-table点击高亮当前行

    1、highlight-current-row 2、:row-class-name=“tableRowClassName”,需要借助@row-click=\\\"handleRowClick\\\"获取当前点击行的下标 参考: elementUI中table点击高亮当前行的两种方式

    2024年03月21日
    浏览(47)
  • element-ui中的el-table合并单元格

    在写项目的时候有时候会经常遇到把行和列合并起来的情况,因为有些数据是重复渲染的,不合并行列会使表格看起来非常的混乱,如下:  而我们想要的数据是下面这种情况,将重复的行进行合并,使表格看起来简单明了,如下:   1:html部分 所谓的合并行就是将多行相同

    2024年02月10日
    浏览(42)
  • 【element ui】 el-popover 样式修改不生效解决方法

    ①基本结构 ②问题 在修改el-popover的样式的时候,和往常修改elmentui样式一样就是不起效果。使用::v-deep或者是/deep/样式穿透都没有效果。 ③原因 看了一篇博主的博客才得知,原因是 el-popover生成的div不在当前组件之内,甚至不在App.vue组件的div内,他和App.vue组件的div平级。所

    2024年02月07日
    浏览(49)
  • vue 设置element ui的el-popover的样式

    设置 element ui 的el-popover的样式需要自定义 popper-class : 自定义 popper-class=\\\"tips-con\\\" ,如下: 在当前文件样式中,不加 scoped 写一份: *** el-popover 生成的 div 不在当前组件之内,甚至不在 App.vue 组件的 div 内,和 App.vue 组件的div 平 级,所以需要全局设置 style 。 *** 页面效果:

    2024年02月11日
    浏览(43)
  • element-ui el-table 如何实现合并单元格

    el-table的组件的可以合并单元格,先定义参数span-method 方法objectSpanMethod。在方法内控制当前单元格渲染成几个单元格或者删除掉当前单元格。 比如:代码中定义:span-method=\\\"objectSpanMethod\\\" objectSpanMethod实现是在方法区,具体内容是根据变量rowSpanList 去决定当前单元格是展示还是删

    2024年02月03日
    浏览(45)
  • vue使用element-ui,el-table不显示

    例如:新增了一个表格,按官网代码贴过来的,结果一直不显示 代码如下一模一样,其他数据正常显示,就表格不显示 其实版本库不一致导致的,贼坑,又不提示 先卸载element-ui安装一个低版本的element-ui就可以解决``

    2024年02月11日
    浏览(60)
  • [element-ui] el-table行添加阴影悬浮效果

    问题: 在el-table每一行获得焦点与鼠标经过时,显示一个整行的阴影悬浮效果 没有什么效果 原因: box-shadow对display:table-row元素是不起作用的 解决方案: 弊端 给el-table行加阴影的问题算是解决了,但是却导致表格内容无法操作 1、通常,项目设计中,el-table会带一些按钮,比如

    2024年02月04日
    浏览(40)
  • element-ui el-table 树形结构 父子级联动

    el-table 表格 为 select 和 select-all 设置回调函数 简要数据格式 单选 全选 操作 ids 不再设置 selection-change 回调函数,直接监听ids 感谢 element-ui el-table 实现全选且父级子级联动 提供的思路 另附 el-table 文档

    2024年02月10日
    浏览(46)
  • 【Element-ui】el-table大数据量渲染卡顿问题

    在项目开发中,遇到在表格中一次性加载完的需求,且加载数量不少,有几百几千条,并且每条都可能有自己的下拉框,输入框来做编辑功能,此时普通的el-table肯定会导致浏览器卡死,那么怎么办呢? 当然很多童鞋肯定会想到利用插件,其实我本人是不咋喜欢插件的,能自

    2024年02月05日
    浏览(47)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包