element ui设置table自适应表格宽，不自动换行

在我们平常开发使用element ui中的table时，会出现数据过长自动换行的结果，
如果把宽给死的情况下也不太适合，接下来提供二种方式去动态计算每个盒子的宽度。

第一种方式

• 表格加** table-layout='auto’ **属性
• 表格加tableAuto类名
• el-table-column标签不设置宽度

<el-table:data="tableData"table-layout='auto'class="tableAuto"><el-table-columnprop="name"label="名称"/></el-table>

// 设置超出不折行
<style>.tableAuto.el-table .cell{white-space: nowrap;}</style>

但这种方式纯在二个问题
1.el-table-column左侧多个列加fixed属性，左右滑动，列宽得提前计算
2.el-table设置table-layout='auto’ 与 固定表头 的功能冲突，表头无法再固定

第二种方式 （推荐使用第二种方式）

第二种方式就是通过canvas动态计算el-table-column宽度，可以完美解决第一种方式的2中弊端。

<template><el-table><el-table-column:width="flexWidth(item.en, tableData, item.cn)"></el-table-column></el-table></temolate><script>/**
 * dynamicCalculationWidth
 * @param string | number prop 每列的prop 可传''
 * @param array tableData 表格数据
 * @param string | number title 标题长内容短的，传标题  可不传
 * @param number num 列中有标签等加的富余量
 * @returns 每列的宽度
 * 注：prop,title有一个必传
 */dynamicCalculationWidth(prop, tableData, title, num =0){if(tableData.length ===0){// 表格没数据不做处理return}let flexWidth =0// 初始化表格列宽let columnContent =''// 占位最宽的内容let canvas = document.createElement('canvas')let context = canvas.getContext('2d')
      context.font ='14px Microsoft YaHei'if(prop ===''&& title){// 标题长内容少的，取标题的值,
        columnContent = title
      }else{// 获取该列中占位最宽的内容let index =0for(let i =0; i < tableData.length; i++){const now_temp = tableData[i][prop]+''const max_temp = tableData[index][prop]+''const now_temp_w = context.measureText(now_temp).width
          const max_temp_w = context.measureText(max_temp).width
          if(now_temp_w > max_temp_w){
            index = i
          }}
        columnContent = tableData[index][prop]// 比较占位最宽的值跟标题、标题为空的留出四个位置const column_w = context.measureText(columnContent).width
        const title_w = context.measureText(title).width
        if(column_w < title_w){
          columnContent = title ||'占位符呀'}}// 计算最宽内容的列宽let width = context.measureText(columnContent)
      flexWidth = width.width +40+ num
      return flexWidth +'px'},</script>

-fs