使用 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版权协议,转载请附上原文出处链接和本声明。