element 表格 - 表头太长换行

问题描述

使用element 表格时做数据呈现时，如果遇到表头字段过多过长，我们的解决办法有以下几种

1. 给每一列添加 width 属性，指定宽度
2. 给每一列添加 min-width 属性，指定最小宽度
3. 使用官网 render-header 列标题 Label 区域渲染使用的 Function
4. 使用 slot-scope 作用域插槽
5. 我实现方法

下面我们一一对比一下各种方法使用：最终的作用是让我们的表格样式好看

第一种情况：使用 width 指定列宽 --- element表格列没有指定width属性那么所有列将会等比占满整个表格，字段太长就会换行显示，如果某一列指定width，剩余列会将剩余的表格宽度等比分配

使用：

<el-table :data="tableData" style="width: 100%">
  <el-table-column prop="date" label="这是我们自定义的表头实在是太长了它自己放不下换行了" width="380"></el-table-column>
  <el-table-column prop="name" label="姓名" width="180"></el-table-column>
</el-table>

注意：全部指定width，如果字段值太少，那么表格无法占满-展示效果查

企业微信截图_15893406358996.png

第二种情况：使用 min-width 指定最小列宽 --- min-width 作用和width相同，只不过min-width 多了一个作用，当某一列按照element默认指定的等比分配宽度小于min-widhth值的时候，该列最小值就是指定的min-width值

使用：

<el-table
  :data="tableData"
  style="width: 100%">
  <el-table-column
    prop="date"
    label="日期"
    min-width="480">
  </el-table-column>
  <el-table-column
    prop="name"
    label="姓名"
    width="180">
  </el-table-column>
  <el-table-column
    prop="address"
    label="地址"
    width="180">
  </el-table-column>
</el-table>

15893394296808.png

注意：如果指定min-width的列宽没有小于指定值，会占满剩余表格宽度

第三种情况：使用 render-header

在使用 render-header 时element会报警告

Comparing to render-header, scoped-slot header is easier to use. We recommend users to use scoped-slot header --> 与呈现头相比，作用域槽头更易于使用。我们建议用户使用作用域槽头。
使用：

<el-table-column
    :render-header="labelHead"
    :prop="col.filedName"
    show-overflow-tooltip="true"
     sortable
     :label="col.alias"
     :formatter="formatterTableCol">
</el-table-column>

// js
 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])
      },
}

提示 我这边有试过用这种方法，总是出现各种问题---有待解决

第四种情况：使用 slot-scope -使用作用域插槽我们可以向表格中添加任意组件

使用：

<el-table :data="tableData" style="width: 100%">
  <el-table-column prop="date" label="日期" min-width="280"></el-table-column>
  <el-table-column prop="name" label="姓名" width="180"></el-table-column>
  <el-table-column>
    <template slot="header" >
      <el-button>自定义表头</el-button>
    </template>
    <template slot-scope="scope">
      <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
      <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
    </template>
  </el-table-column>
</el-table>

15893403114714.png

重点：使用slot-scope可以实现表格-表头和内容自定义
但是我们依旧无法解决让表头实现不换行全部显示,没有指定宽度的列，依旧等比分配了，里面内容可以设置宽度，但是不起作用。目前没找到好的方法~~~

image.png

自

己
思路：如果我们给表格label值特别长的列设置width，其余列不设置不是可以解决？
一般情况我们的表格都是通过v-for循环实现的

<el-table-column
  :label="item.label"
  :prop="item.prop"
  :width="item.width"
  v-for="(item,index) in comTableHead"
  v-show="item.showLable"
  :key="index"
  :formatter="formatterColumn"
  :show-overflow-tooltip="item.showTooltip"
></el-table-column>

这样我们就需要再表头渲染之前处理，根据label值的长度，如果label值长度大于4我们就设置width属性，其余为 "" 不设置
注意: font-size 并不代表字符的长度，是大小，如果设置font-size：16px;不代表一个字符的宽度就是 16，我把页面中font-size设置为16px；这样一个中文字符的宽度就是24， （这种方式处理依赖于文字的大小，文字大小是响应屏幕大小变化，这种方式不适用）---后面又更好的方法再更新

// 表格字段长度超过4
tableHeadLength(label){
  label = label || ""
  if(label && label.length > 4){
    return label.length * 25;
  }else{
    return ""
  }
}