element ui表格错乱 element 表格错位

转载

mob64ca13faa4e6 2024-04-01 06:40:07

文章标签 element ui表格错乱 vue html css 自定义 文章分类 机器学习人工智能

前端在开发PC 端项目时，现在用的比较多的就是Element UI,而在PC端管理系统中，Table 可以说是必不可少，刚开始使用对table没有做过多的处理，可是在需要做一些处理时，对其文档不熟悉使用不熟练总出现一些意想不到的问题。

表头和内容错位：

解决在全局中添加样式可解决：

.el-table th.gutter {
  display: table-cell !important;
}

自定义table 边框及单元格边框

表格设置的border 覆盖掉自定义的border 而且只在最后一列，因为默认是灰色一直以为自己设定的没有生效开两个效果吧

没有添加table 的 border 属性

element ui表格错乱 element 表格错位_vue_02

添加table 的 border 属性之后，看最右侧的边框目前看到的是border 的效果，其实是最调整电脑屏幕的时候这个线是盖掉了自定义的边框的，为什么别的没被覆盖，其实在我的感觉是最后一个自定义的border 和 table 的border 属性边框没有重合导致在不同宽度下展示的是不一样的。

element ui表格错乱 element 表格错位_vue_03

给table 添加border 属性的代码如下分别给table header cell 设置 border ，以避免border 合并后比变粗

<el-table :data="tabledata" border cell-class-name="cellStyle" header-cell-class-name="headerCellStyle" class="table" style="width:100%">
        <el-table-column v-for="(item, index) in labelKeys" :label="item.label" :prop="item.key" :key="index" show-overflow-tooltip></el-table-column>
   </el-table>

====================style===========================================

 .table {
    border: 1px solid rgb(68, 67, 67);
    border-right: none;
  }
  .headerCellStyle {
    border-bottom: 1px solid rgb(68, 67, 67) !important;
    border-right: 1px solid rgb(68, 67, 67);
  }
  .cellStyle {
    border-bottom: 1px solid rgb(68, 67, 67);
    border-right: 1px solid rgb(68, 67, 67);
  }

table column 设置宽度带来的问题选 width 还是 min-width

如果给el-table-column设置了width 宽度，如果所有的column 宽度加起来没有table 分到的宽度高会出现空余的部分，如下图：

element ui表格错乱 element 表格错位_element ui表格错乱_04