elementUI 表格列宽自适应

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 += total
            return 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元素span
    htmlSpanElement.innerText = str;
    htmlSpanElement.className = 'getTextWidth'; // 为span增加属性 class用来标识
    document.querySelector('body').appendChild(htmlSpanElement); 
    width = document.querySelector('.getTextWidth').offsetWidth; // offsetWidth 水平方向 width + 左右padding + 左右border-width
    document.querySelector('.getTextWidth').remove(); //添加 获得宽度 销毁
    return width;
}