ElementUi 之el-table 的一点小总结[表头内容错位[自定义border问题][自定义列宽度]

港控/mmm° 2023-02-20 02:12 36阅读 0赞

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

**表头和内容错位：**

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

.el-table th.gutter \{

display: table-cell !important;

**![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NhbmR5X3poaQ_size_16_color_FFFFFF_t_70][]**

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

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

没有添加table 的 border 属性

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NhbmR5X3poaQ_size_16_color_FFFFFF_t_70 1][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NhbmR5X3poaQ_size_16_color_FFFFFF_t_70 2][]

给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 分到的宽度高 会出现空余的部分 ，如下图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NhbmR5X3poaQ_size_16_color_FFFFFF_t_70 3][]

那么试试 min-width 呢 ？看官方文档描述：**对应列的最小宽度，与 width 的区别是 width 是固定的，min-width 会把剩余宽度按比例分配给设置了 min-width 的列**

**![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NhbmR5X3poaQ_size_16_color_FFFFFF_t_70 4][]**

改成把min-width 之后完全不会有宽度适应的问题了，那么以后要设置宽度的时候可以选他喽 ，如果width 和 min-width 都不设置 其实是会按照内容作相应分配的 也会撑满。

**单元格设置不换行**

对于单元格的内容是否支持换行 ，可以用属性 show-overflow-tooltip 会自动不换行 如果有溢出隐藏，鼠标移到对应的内容会出出现完整的内容提示。

<table> 
 <tbody> 
  <tr> 
   <td>show-overflow-tooltip</td> 
   <td>当内容过长被隐藏时显示 tooltip</td> 
  </tr> 
 </tbody> 
</table>

以上记录总结。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NhbmR5X3poaQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200621205429261.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NhbmR5X3poaQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NhbmR5X3poaQ_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/2020062120130925.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NhbmR5X3poaQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NhbmR5X3poaQ_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200621201622351.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NhbmR5X3poaQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NhbmR5X3poaQ_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200621203635779.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NhbmR5X3poaQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NhbmR5X3poaQ_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200621203837566.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NhbmR5X3poaQ==,size_16,color_FFFFFF,t_70