背景

el-table表格中的字段超出宽度会折行显示，可以使用超出宽度...悬浮提示来解决，但使用这种方式当表格中内容过多时会影响性能并且有时业务需要全部展示表格内容。在这种情况下需要采取表格内容不换行铺开横向滚动的方式解决。在这过程中需要设置表格列的最小宽度，但是表格的每一列随着内容的不同，列宽也会不一样，统一设置最小宽度为同一个值虽然可以横向滚动平铺表格内容，但是表格内容可能会折行显示，因此需要动态设置表格每一列的宽度。

实现表格内容平铺不折行显示（表格整体横向滚动）

(1)定义一个对象数组用于描述表头相关属性
属性包括prop、label、width

tableHead:[
   {
       label:'表头字段名',
       prop:'列表属性字段',
       width:'表格列宽度'
     },
......
]

(2) 使用v-for循环生成表头

<el-table :data="data" style="width: 100%">
    <el-table-column  :min-width="item.width"  align="left" v-for="(item,index) in tableHead" :key="index" :prop="item.prop" :label="item.label">
  </el-table-column>
   </el-table>

(3) 动态计算表格的列宽

动态获取表格列宽的方法

/*
* @description 计算列表列宽（把内容撑开）
* @param {Array} columns 列的数组
* @param {Array} tableArr 列表的数组
*/
export function calcColumnsWidth(columns, tableArr,defaultWidth=110) {
    columns.forEach((item) => {
        const arr = tableArr.map((x) => x[item.prop]);
        item.width = getMaxLength(arr,defaultWidth);
        arr.push(item.label); // 把每列的表头也加进去算
    });
    return columns;
}

/*
 * 使用span标签包裹内容，然后计算span的宽度 width： px
 * @param valArr
 */
function getTextWidth(str) {
    let padding = 0;//单元格左右padding距离
    let width = 0;
    let span = document.createElement('span');
    span.innerText = str;
    span.className = 'getwidth';
    document.querySelector('body').appendChild(span);
    // 这里可以获取当前单元格的font-size 以及 内容的中英文、字母等  做更精确的计算
    width = document.querySelector('.getwidth').offsetWidth+padding;
    document.querySelector('.getwidth').remove();
    return width;
}

/*
* 遍历列的所有内容，获取最宽一列的宽度
* @param {Array} arr 需要计算的数据
* @param {Number} minwidth 列最小宽度
*/
function getMaxLength (arr,minwidth) {
    return arr.reduce((acc, item) => {
        if (item) {
            let calcLen = getTextWidth(item);
            if (acc < calcLen) {
                acc = calcLen;
            }
        }
        return acc<minwidth?minwidth:acc;
    }, 0)
}

在请求接口获取表格数据的地方调用calcColumnsWidth方法计算列宽度
calcColumnsWidth()方法接收三个参数，分别为tableHead（描述表头信息的对象数组）、tableData（表格数据）、defaultWidth（表格列默认的宽度）

import {calcColumnsWidth} from 'xxx/xxx.js'
async getTableData(){
let res=await api.getTableData() 
if(res.data.code==200){
this.tableData=res.data.data
const columns=calcColumnsWidth(this.tableHead,this.tableData,110)
this.tableHead=columns
}
}