elementUI表头宽度自适应

最新推荐文章于 2024-12-16 17:13:03 发布

ChargerBot

最新推荐文章于 2024-12-16 17:13:03 发布

阅读量624

点赞数

文章标签： elementui 前端 javascript

原文链接：https://blog.youkuaiyun.com/weixin_43971142/article/details/124496243

版权

本文介绍如何在main.js中对ElementUI的TableColumn进行配置以实现单元格宽度自适应。通过设置minWidth属性，使得表格列宽能根据label长度动态调整，支持中文和英文字符，同时考虑了字体大小及单元格内边距。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

main.js中
对elementui TableColumn统一设置默认值，其他组件也可这样设置默认值

import ELEMENT from 'element-ui';
ELEMENT.TableColumn.props.minWidth = {
	default:function(){
		if(this.label){
			//将双字节字符替换为两个a，14为当前font-size 一个a为7.8px 一个汉字为14px 单元格左右padding为20px
			return this.label.replace(/[^\x00-\xff]/g,'aa').length * 7.8 + 20 + 'px';
		}
	}
}