element-ui表格表头内容显示完整,不换行

平时使用element ui的tabled 是,我想大家应该都会经常遇到这样的问题,表头内容过长时会换行,造成整个表格很不美观,下面我就这个问题说一下问题如何解决

<el-table-column
    :render-header="labelHead"
    :prop="col.filedName"
    show-overflow-tooltip="true"
     sortable
     :label="col.alias"
     :formatter="formatterTableCol">
</el-table-column>
 methods: {
      labelHead: function(h, { column, $index }) {
        let l = column.label.length
        let f = 16
        column.minWidth = f * (l + 2)//加上一个文字长度
        return h('div', { class: 'table-head', style: { width: '100%' } }, [column.label])
      },
}
css:
/*设置表头样式*/
  .station-search .table-head {
    font-size: 14px !important;
  }
  .station-search .el-table .caret-wrapper{
    position:absolute;
    top:2px;
    right:0;
  }
  .station-search .el-table .cell, .el-table th div{
    padding:0!important;
  }
  .station-search .el-table tr td .cell{
    padding:5px 2px !important;
  }
  .station-search .el-table .cell,
  .station-search .el-table th div,
  .station-search .el-table--border td:first-child .cell,
  .station-search .el-table--border th:first-child .cell{
    padding-left:0 !important;
  }
  /*设置表头样式*/
主要:修改elementui的默认样式,不能在<style scoped></style>内修改,否则无效,必须在<style ></style>
内编写,我增加station-search这个是为了防止其他表格也受到影响

这个解决方法:引用于https://blog.csdn.net/weixin_34364979/article/details/79476865

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容