美文网首页
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表格表头内容显示完整,不换行

    平时使用element ui的tabled 是,我想大家应该都会经常遇到这样的问题,表头内容过长时会换行,造成整个...

  • Element Ui 相关Bug解决方案

    element-ui的table表格控件表头与内容列不对齐 解决方法:将以下样式代码添加到index.html、或...

  • css常用属性记录

    1、table表格中的: 1.1 表格中显示的内容不是中文而是纯数字或英文时,默认是不换行的(中文默认换行),想要...

  • vue element-ui动态生成table表头和数据

    element-ui动态生成表头和数据;应用场景:由于业务需要根据后台返回的数据进行动态的生成表格(表头+数据);...

  • element 表格 - 表头太长换行

    问题描述 使用element 表格时做数据呈现时,如果遇到表头字段过多过长,我们的解决办法有以下几种 给每一列添加...

  • iview Table的表头隐藏

    控制表格表头的显示:show-header 属性

  • element 表格拖拽排序与动态表头

    解决表头过多(20+)表格数据展示不直观的问题。 产品功能 1.隐藏不重要的表头2.表头拖拽排序3.可设置默认显示...

  • 【2017.3.17】关于html中引用表格

    标签定义表格的表头。该标签用于组合 HTML 表格的表头内容。 thead 元素应该tbody与tfoot元素结合...

  • TABLE表头固定问题

    由于表格内容td是动态生成的,宽度不固定,所以通过定位的方式来实现表头固定会使表头脱离文档流,跟td内容不对齐,通...

  • MarkDown总结

    表格内文字过多,如何换行? 如果表格内文需要换行,可以在要换行的内容后加入<把我删掉br>,后面的内容就会跑到下一...

网友评论

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

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