Element UI 中＜el-popover＞的使用

AiGarry

已于 2022-11-02 18:02:31 修改

阅读量8.4k

点赞数

文章标签： vue.js elementui javascript

于 2022-05-24 14:53:31 首次发布

本文链接：https://blog.youkuaiyun.com/AiGarry/article/details/124945978

版权

本文介绍了如何利用Element UI的<el-popover>组件解决表格中因单元格内容过多导致的不美观问题。通过在表格中添加popover提示信息，并配合js逻辑和css样式调整，实现popover的动态显示和内容过长时的滚动效果，以保持表格的整体和谐。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

有时在表格中会因为单元格的宽度过小，或者内容过多会换行，这样列表看起来有的行会高，有的行会矮，整体看起来不太和谐，也不美观

1、首先可以使用

我们可以使用popover提示信息，html部分

<el-table-column prop="address" label="address" min-width="100">
     <template #default="scope">
        <el-popover
            placement="right"
            :width="300"
            trigger="hover"
            show-arrow
            title="Address"
            popper-class="tooltip-wrap">
                <!-- 使用v-html渲染popover中现实的内容 -->
                <div
                  v-html="showAddressPopover(scope.row.address)"
                  class="popover-content">
                </div>
                <template #reference>
                    <!-- 给span设置一个样式，防止popover框发生位置偏移 -->
                  <span style="width:100px;display:inline-block;cursor:pointer">
                    {{ showAddressData(scope.row.address) }}
                  </span>
                </template>
         </el-popover>
     </template>
</el-table-column>

2、js逻辑代码，在html中直接判断有点不太合适，可以将其写成一个方法

methods:{
    //showAddressData()  处理表格中数据过长的问题，是内容溢出部分变为省略号
    //因为我这里传的 scope.row.address 是数组，所以我要在这里对数组进行处理操作
    showAddressData(cellValue) {
      if (cellValue && cellValue.length > 20) {
        let topictamp = cellValue.map((item) => {
          return item;
        });
        return topictamp.join(",").substr(0, 20) + "...";
        }
         if (cellValue && cellValue.length <= 20) {
             let topictamp = cellValue.map((item) => {
             return item;
             });
            return topictamp.join(",");
         }
      },

    //showAddressPopover()   渲染popover中提示的内容
    showAddressPopover(cellValue) {
       let temp= cellValue.map((item) => {
         return item;
       });

    //将得到的数据根据逗号进行换行，然后再使用v-html渲染到页面中
      return temp.join(",").replace(/\,/g, "</br>");
    },
}

3、css部分，可以设置popover框的宽高，设置popover框和popover框提示内容的最大高度，这样内容过多会出现纵向滚动条,从而达到使popover中的title固定的效果

<style lang="scss">
//设置popover框的最大高度
.tooltip-wrap {
  max-height: 200px;
}
//设置popover框提示内容的最大高度，内容过多出现纵向滚动条,固定popover中的title
.popover-content {
  max-height: 150px;
  overflow: auto;
  overflow-x: hidden;
}
</style>