el-table添加border边框线不显示

北半球的狗

已于 2022-08-23 18:07:43 修改

阅读量6.9k

点赞数 2

文章标签： javascript 前端 vue.js

于 2022-08-23 17:32:00 首次发布

本文链接：https://blog.csdn.net/weixin_48305373/article/details/126489368

版权

在使用Element UI的el-table组件并设置border属性时，可能会遇到边框显示不全的问题，特别是当表格高度固定时。通过调整CSS样式，如移除表格高度限制，以及为表头和表单的最后一个子元素添加特定的border-left样式，可以解决这一问题。确保表单和表格边框对齐，避免显示异常。

摘要由CSDN通过智能技术生成

el-table添加border属性使用作用域插槽会不现实左边的边框线，或者右边的边框线

在这里插入图片描述

总结问题

1.固定了表格的高度 height=“250” 把高度去掉
<el-table
:data=“orderTableData”
style=“width: 100%; margin-top: 20px”
border
height=“250”
Checkbox
@selection-change=“tableChange”
>

 //表头
  thead th:not(.is-hidden):last-child {
    border-left: 1px solid #ebeef5;
  }
  //表单
  .el-table__row {
    td:not(.is-hidden):last-child {
      border-left: 1px solid #e4e7ec;
    }