elementUI的表格组件中，表头和表格是由两个数组来控制渲染。例如表格：treeDate 表头：configHeader。
API里面没有给出控制列宽随字段变化而变化的方法，我参考了网上各种方法，找到了一种比较简单通用的方法来实现 表格列宽自适应。
实现思路是利用 vue 的watch 属性监控表格的数据，计算每列的内容和表头的最大宽度，计算的时候把表格内容使用span标签包裹，然后计算span标签的宽度width：px，然后再加上表格的内外边距，
就得到了列的最大宽度.
首先是数据和表头数组，代码里面是读取后台返回和XML文件方式，表头结构如下，表格也是一样。
configHeader= [{label:"ID", prop:"id"},{label:"资产名称", prop:"asset_name"},{label:"OA工单号", prop:"oa_jon_num"},{label:"IP", prop:"ipaddress"},{label:"SN号", prop:"sn"},{label:"CPU(核)", prop:"cpu"},{label:"内存(G)", prop:"memory"},{label:"存储(G)", prop:"disk"},{label:"资产类型", prop:"device_type_name"},{label:"资产状态", prop:"device_status_name"},{label:"所属环境", prop:"device_env_type_name"}，]
下面是代码
// 监听表格数据变化，主要是第一次渲染
watch: {tableData2(valArr) {const _this = this,total = 0;this.configHeader2 = this.configHeader2.map(value => {const arr = valArr.map(x => x[value.props]); // 使用map函数获取表头的某一个对象的props 所对应的全部值arr.push(value.label);value.width = _this.getMaxLength(arr) + 20;total += totalreturn value;})if (total <= tabelWidth) { // 跟表格宽度比较，小于表格宽度 置为空 让列自适应_this.configHeader2.forEach((i) => {i.width = NaN;})}}
/*** 遍历列的所有内容，获取最宽一列的宽度* @param arr*/getMaxLength (arr) {return arr.reduce((acc,item) => {if (item) {let width = this.getTextWidth(item);if(acc < width) {acc = width}}return acc;},0)},/*** 使用span标签包裹内容，然后计算span的宽度 width* @param str*/getTextWidth(str) {let width = 0;let htmlSpanElement = document.createElement('span'); //动态构造html元素spanhtmlSpanElement.innerText = str;htmlSpanElement.className = 'getTextWidth'; // 为span增加属性 class用来标识document.querySelector('body').appendChild(htmlSpanElement); width = document.querySelector('.getTextWidth').offsetWidth; // offsetWidth 水平方向 width + 左右padding + 左右border-widthdocument.querySelector('.getTextWidth').remove(); //添加 获得宽度 销毁return width;}
