el-table表头自适应宽度(解决出现省略号的问题)

el-table表头自适应宽度(Vue)

html部分

<el-table>
	<el-table-column label="根据标题字数/大小自适应宽度" :render-header="linefeed"></el-table-column>
</el-table>

js部分

methods: {
	linefeed (h,{column,index}) { // column,index都是el-table中自带的
		let number = column.label.length // 表头字数
		let size = 16 // 字体尺寸
		column.minWidth = number*size // 计算宽度
		return h('div',{class:'table-head',style:{width:'100%'}},[column.label])
	}
}

效果展示(下图为其他项目截图,但与上述代码效果一致)

语录分享