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

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

<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
原文地址:element-ui表格表头内容显示完整,不换行

你可能感兴趣的:(javascript,elementui)