el-table动态渲染不换行

使用 slot=“header”

<el-table-column
  prop="schoolName"
  label="教师名"
  :min-width="firstColumnWidth"
  fixed>
  <template slot="header" slot-scope="scope">
    {{firstColumn(scope)}}
  </template>
</el-table-column>
<el-table-column
  v-for="(item,index) in tableTitle"
  :prop="item.attribute"
  :label="item.title"
  :key="index"
  align="center" sortable='custom'>
  <template slot="header" slot-scope="scope">
    <div class="table-head">{{rewriteHeader(scope)}}</div>
  </template>
  <template slot-scope="scope">
    <span :class="{can_click:scope.row[item.attribute].statisticsType==1}">{{ scope.row[item.attribute].valueStr }}</span>
  </template>
</el-table-column>

监听第一列,找出最长的一行

watch: {{
	tableData(val) {
      this.cellLabelLength = 0
      val.forEach((item,index) => {
        if (strlen(item.schoolName) > this.cellLabelLength) {
          this.cellLabelLength = strlen(item.schoolName)
        }
      })
    },
}
// 判断中文和英文占位符长度
export function strlen(str) {
  let len = 0;
  for (let i=0; i<str.length; i++) {
    let c = str.charCodeAt(i);
    //单字节加1
    if ((c >= 0x0001 && c <= 0x007e) || (0xff60<=c && c<=0xff9f)) {
      len++;
    } else {
      len+=2;
    }
  }
  return len;
}
firstColumn(scope) {
  let l = this.cellLabelLength/1.6
  let f = 14
  scope.column.minWidth = f * (l + 1)
  this.firstColumnWidth = scope.column.minWidth
  return scope.column.label
},
rewriteHeader(slot) {
  let l = slot.column.label.length
  let f = 16
  slot.column.minWidth = f * (l + 1)//加上一个文字长度
  return slot.column.label
},
另一种方法(不推荐使用)

使用render-header:

<el-table-column
  :render-header="labelHead"
  v-for="(item,index) in tableTitle"
  :prop="item.attribute"
  :label="item.title"
  :key="index"
  align="center" sortable='custom'>
  <template slot-scope="scope">
    <span :class="{can_click:scope.row[item.attribute].statisticsType==1}">{{ scope.row[item.attribute].valueStr }}</span>
  </template>
</el-table-column>

//重新渲染表头
labelHead(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])
},

版权声明:本文为qq_40364610原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。