element中table表头不换行

发表于   |   分类于   |     |  

[TOC]

使用el-table做一个表格，当表头内容过长时会换行，在不设置的宽度的时候每一列的宽度是等比例分配的，虽然element-ui中提供了width和min-width这个属性可以自由设置。

但是因为要做的表格很多，而且要一一计算比例然后再赋值给width也是一件很繁琐的事。

element中每个column都有一个属性render-header，它是渲染这一列的列标题区域所用的函数。

1
2
3
4
5
<el-table border :data="tableData" v-loading="loading" 
      :row-class-name="tableRowClassName">
      <el-table-column v-for="(item,index) in tableColumn" :label="item.name"
                :prop="item.prop" v-if="item.show" :key="index" align="center" :render-header="tableHead"></el-table-column>
</el-table>
1
2
3
4
5
6
7
8
9
methods: {
	tableHead(h, {column}) {
		let wordsLength = column.label.length;
		let fontSize = 14; // 每个字大小，其实是每个字的比例值，大概会比字体大小差不多大一点，
		column.minWidth = fontSize * wordsLength + 50; // 字大小乘个数即长度 ,注意不要加px像素，这里minWidth只是一个比例值，不是真正的长度
		// 然后将列标题放在一个span中，注意块的宽度一定要100%，否则表格显示不完全
		return h('span', {class: 'table-head', style: {width: '100%'}}, [column.label]);
			}
}
1
2
3
.table-head{
        font-size:14px !important;//设置固定的字体大小
    }

热评文章