element-plus table show-overflow-tooltip显示偏移问题处理

处理方式一

使用 el-tooltip 组件结合表格 show-overflow-tooltip

<el-table-column label="归属单位" :show-overflow-tooltip="{disabled: true}">
  <template #default="scope">
    <el-tooltip
      effect="light"
      :content="scope.row.departmentName"
      placement="top"
    >
      <span>{{ scope.row.departmentName }}</span>
    </el-tooltip>
  </template>
</el-table-column>

处理方式二

使用 hack 技术。

当元素祖先的 transform、perspective、filter 或 backdrop-filter 属性非 none 时,容器由视口 viewport 改为该祖先。

给父元素加上 transform: scale(1) 或者是别的,只要 transform 的属性不是 none 就行
(会产生副作用, 会影响其他的定位)

.el-table {
  transform: translate(0);
}
PS:写作不易,如要转裁,请标明转载出处。
%{ comment.page.total }条评论

微信小程序:前端开发宝典

相关笔记
工具操作
  • 内容截图
  • 全屏
登录
注册
回顶部