美文网首页
element-ui表格表头内容显示完整,不换行

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

作者: Amy_yqh | 来源:发表于2019-07-08 17:25 被阅读0次

    平时使用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

    相关文章

      网友评论

          本文标题:element-ui表格表头内容显示完整,不换行

          本文链接:https://www.haomeiwen.com/subject/sfyahctx.html