脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → ElementUI在el-table中使用el-popover

Vue ElementUI在el-table中使用el-popover问题

 更新时间：2023年04月12日 22:18:06   作者：小聪聪  
这篇文章主要介绍了Vue ElementUI在el-table中使用el-popover问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

ElementUI在el-table中使用el-popover

Vue ElementUI在el-table中使用el-popover，点击嵌套内容中的确定或取消来关闭el-popover。

<el-table-column width="100" align="center" label="操作">
  <template slot-scope="scope">
    <el-popover width="160" :ref="`popover-${scope.$index}`">
      <p>确定删除该项吗？</p>
      <div style="text-align: right; margin: 0">
        <el-button type="text" size="mini" @click="scope._self.$refs[`popover-${scope.$index}`].doClose()">
          取消
        </el-button>
        <el-button type="danger" size="mini" >确定</el-button>
      </div>
      <el-button type="text" slot="reference">删除</el-button>
    </el-popover>
  </template>
</el-table-column>

方法二

<el-table-column width="100" align="center" label="操作">
  <template slot-scope="scope">
    <el-popover width="160" :ref="`popover-${scope.$index}`">
      <p>确定删除该项吗？</p>
      <div style="text-align: right; margin: 0">
        <el-button type="text" size="mini" @click="handleClose(scope.$index)">
          取消
        </el-button>
        <el-button type="danger" size="mini" >确定</el-button>
      </div>
      <el-button type="text" slot="reference">删除</el-button>
    </el-popover>
  </template>
</el-table-column>

<script>
 ...
   handleClose(index) {
     this.$refs[`popover-${index}`].doClose()
   }
 ...
</script>

方法三

<div ref="closepopover">
<el-table-column  label="操作">
 <template slot-scope="item">
  <el-popover
    placement="right"
    title="确定删除？"
    width="200"
    v-model="item.row.visible"
    trigger="click">
    <div style="text-align: right; margin: 0">
      <el-button size="mini" type="text" @click="updateVisible()">取消</el-button>
      <el-button type="primary" size="mini" @click="updateVisible()">确定</el-button>
    </div>
    <el-button slot="reference">删除</el-button>
  </el-popover>
</template >
</el-table-column>


//也可解决
updateVisible(){
    this.$refs.closepopover.click();
}

el-popover在el-table中会出现不显示情况

Popover 的属性与 Tooltip 很类似 都是弹出提示，一般情况下，如果是固定提示内容的话，采取Tooltip 简单了事。

接触到一个需求，el-table其中一列，根据后端返回的数据不同展示不同的 btn，其中一个btn 需要鼠标hover 的时候 获取该行元素的 id（需要在hover的时候 通过调接口获取），此时使用Tooltip就无法达到动态显示提示内容的效果了。

Popover 在基于Tooltip 有@show事件，当提示内容hover的时候，可以触发@show回调，此时可以去请求后端接口获取需要的数据。

问题： 在el-table-column 内 使用el-popover 有时候会出现hover 不显示提示框的情况

总所周知，el-table-column 代表的是 列，在其中写 一个el-popover ，其相当于 写了N个，（N取决于el-table 中 data 的 数组长度） table 常常 与 分页 一起使用

以下属于个人猜测，为了解释给自己听的

由于el-table data数据长度，遍历出多个 el-popover 而 el-popover 是根据条件row.staus === 1 判断是否出现的 （其中el-popover 的一些熟悉 就不写了）

<el-table-column >
 <template #default="{row}">
  <el-popover ....>
    <span>需要显示的文本内容</span>
    <div slot="reference" v-if="row.status === 1">查看内容</div>
  </el-popover>
  <div v-if="row.status === 2">暂无内容</div>
 </template>
</el-table-column>

此时可能会出现一种情况，第一页table 有10条数据， 其中第一条 和 第5条的row.status === 1 

第二页 只有2条数据，第一条row.status === 2 第二条 row.status === 2

bug 复现： 当我第一次进入页面， hover 第一页的第一条数据 能够正常显示 <span>内容，也能正常显示第五条<span>内容，

当我切换到第二页，由于第二页只有两条数据，而且status === 2 所以 hover 是不会显示数据的， 这个时候 我再切换到第一页，再次hover 到第一条数据发现，此时row.status === 1 的那条数据不再显示<span>内容了 然而 第一页的 第五条数据 row.status ===1 hover 还是能正常显示<span>内容

经过上述操作，（个人觉得，没有官方判断）第一页的第一条本应该hover 展示<span>内容的 却没有展示 是因为 可能复用了 第二页第一条row.status === 2 的el-popover

为了防止 el-popover 复用，采取两个方法 ：

1. 给el-popover不同的ref

2. 将v-if 判断同步移到 el-popover里

<el-table-column >
 <template #default="{row}">
  <el-popover v-if="row.status === 1" :ref="`node-${row.id}`">
    <span>需要显示的文本内容</span>
    <div slot="reference" v-if="row.status === 1">查看内容</div>
  </el-popover>
  <div v-if="row.status === 2">暂无内容</div>
 </template>
</el-table-column>

当 row.status !==1 时 el-popover 自然而然就被销毁了，也就不存在复用的情况，若出现第一页 和 第二页 都是row.status === 1 的情况，此时 由于ref 不同也不会复用  （下划线内容 为个人判断）

经过上述操作，大致能解决 el-popover 不显示的问题 （由于个人对该组建理解不是很深刻，所以不敢打包票 百分百解决）

额外内容：

通过查看el-popover 的源码 发现 存在一些 element 组件options没有 给出的一些方法，可以配合 ref 一起使用，能实现一些特殊功能的处理 。 通过 this.$refs['el-popover的ref'].方法()

通过查看源码可以发现，el-popover 中的methods 有以下几个方法：

  • doShow() : 展示el-popover
  • doClose() : 关闭el-popover
  • doToToggle() : 取反  关闭则展示，展示则关闭

tips:

当el-popover 内 不写 slot=“reference” 其中内容是不会展示（div内容）的 例如：

<el-popover>
 <div>没有使用slot插槽</div>
</el-popover>

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • 在Vue当中同时配置多个路由文件的方法案例代码

    在Vue当中同时配置多个路由文件的方法案例代码

    这篇文章主要介绍了在Vue当中同时配置多个路由文件的方法,包含具体代码，本文分步骤结合示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2022-12-12
  • Vue 页面权限控制和登陆验证功能的实例代码

    Vue 页面权限控制和登陆验证功能的实例代码

    这篇文章主要介绍了Vue 页面权限控制和登陆验证功能的实例代码，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-06-06
  • vue navbar tabbar导航条根据位置移动实现定位、颜色过渡动画效果的代码

    vue navbar tabbar导航条根据位置移动实现定位、颜色过渡动画效果的代码

    这篇文章主要介绍了vue navbar tabbar导航条根据位置移动实现定位、颜色过渡动画效果,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2022-08-08
  • vue实现微信分享链接添加动态参数的方法

    vue实现微信分享链接添加动态参数的方法

    这篇文章主要介绍了vue微信分享链接添加动态参数的实现方法，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下
    2019-04-04
  • Vue.js的动态组件模板的实现

    Vue.js的动态组件模板的实现

    这篇文章主要介绍了Vue.js的动态组件模板的实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-11-11
  • Vue中的异步组件函数实现代码

    Vue中的异步组件函数实现代码

    这篇文章主要介绍了Vue中的异步组件函数实现代码,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
    2018-07-07
  • vue前端项目打包成Docker镜像并运行的实现

    vue前端项目打包成Docker镜像并运行的实现

    这篇文章主要介绍了vue前端项目打包成Docker镜像并运行的实现方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-08-08
  • VUE跨域详解以及常用解决跨域的方法

    VUE跨域详解以及常用解决跨域的方法

    跨域指浏览器不允许当前页面的所在的源去请求另一个源的数据,下面这篇文章主要给大家介绍了关于VUE跨域详解以及常用解决跨域的方法,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2022-07-07
  • vue3数据监听watch/watchEffect的示例代码

    vue3数据监听watch/watchEffect的示例代码

    我们都知道监听器的作用是在每次响应式状态发生变化时触发，在组合式 API 中，我们可以使用 watch()函数和watchEffect()函数,下面我们来看下vue3如何进行数据监听watch/watchEffect，感兴趣的朋友一起看看吧
    2023-02-02
  • Vue.js：使用Vue-Router 2实现路由功能介绍

    Vue.js：使用Vue-Router 2实现路由功能介绍

    本篇文章主要介绍了Vue.js：使用Vue-Router 2实现路由功能介绍，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-02-02

最新评论