table表格列宽动态调整方案

在做表格的时候，设置好的列宽却因为数据太长导致换行，想让它自己调整宽度，但是现在elementUI组件好像还没有这个功能。所以自己写了一个方法实现它。

一个动态改变表格列宽的方法

该方法实现了自适应列内容长度不换行，另外改变字体大小也会改变列宽，也实现了自适应字体大小列宽调整。
这个方法的思路是将列数据拆成单个字母或者单个中文字或其他单个符号放入数组中，对不同类型设置不同宽度，接着算出所有列数据的宽度，取最大宽度的一个设置为表格列宽。

• 自动调节表格列宽 ：flexColumnWidth ，返回值为宽度值，只有数字没有单位
• title：表列名 （例：‘名字’，‘性别’，‘手机号码’）
• tableData:表格数据
• str：字段名 （例：tableData[0].name 中的’name’， tableData[0].phone，的’phone’，
• currentfontsz：当前字体尺寸（填数字就好）
• sizetype：字体尺寸的单位（是px还是rem）

flexColumnWidth(
      title,
      str,
      tableData,
      currentfontsz,
      sizetype,
      flag = "max"
    ) {
      //可能tableData里面的是个object对象，把它里面的name取出来替换它,传参时只需传对象名就好了。
      if (tableData == null) return;
      let tb = JSON.parse(JSON.stringify(tableData));
      for (let i = 0; i < tb.length; i++) {
        if (typeof tb[i][str] == "object") {
          tb[i][str] = tb[i][str].name;
        }
      }
        //外部字体尺寸变化的时候，这里进行了适配，以求宽度会随着字体尺寸变化而动态调整
      let flexperson;
      if (sizetype == "rem") {
        let basesize = document.documentElement.style.fontSize;
        flexperson =
          (Number(basesize.slice(0, basesize.length - 2)) * currentfontsz) / 14;
      } else if (sizetype == "px") {
        flexperson = currentfontsz / 14;
      }

      console.log(flexperson);
      str = str + "";
      let columnContent = "";
      if (!tb || !tb.length || tb.length === 0 || tb === undefined) {
        return;
      }
      if (!str || !str.length || str.length === 0 || str === undefined) {
        return;
      }
      if (flag === "equal") {
        // 获取该列中第一个不为空的数据(内容)
        for (let i = 0; i < tb.length; i++) {
          if (tb[i][str].length > 0) {
            // console.log('该列数据[0]:', tableData[0][str])
            columnContent = tb[i][str];
            break;
          }
        }
      } else {
        // 获取该列中最长的数据(内容)
        let index = 0;
        for (let i = 0; i < tb.length; i++) {
          if (tb[i][str] === null) {
            tb[i][str] = "";
          }
          const now_temp = tb[i][str] + "";
          const max_temp = tb[index][str] + "";
          if (now_temp.length > max_temp.length) {
            index = i;
          }
        }
        //表头标题的长度可能比值还长，这时就用表头长度作为基础设计列宽。
        columnContent =
          tb[index][str].length > title.length ? tb[index][str] : title;
      }
      columnContent += "";
      console.log(columnContent);
      let co = columnContent.split("");
      // console.log('该列数据[i]:', columnContent)
      // 以下分配的单位长度可根据实际需求进行调整
      let flexWidth = 20;

      for (const char of columnContent) {
        if ((char >= "A" && char <= "Z") || (char >= "a" && char <= "z")) {
          // 如果是英文字符，为字符分配8个单位宽度
          flexWidth += 9;
        } else if (char >= "\u4e00" && char <= "\u9fa5") {
          // 如果是中文字符，为字符分配15个单位宽度
          flexWidth += 18;
        } else {
          // 其他种类字符，为字符分配8个单位宽度
          flexWidth += 9;
        }
      }
      if (flexWidth < 65) {
        // 设置最小宽度
        flexWidth = 65;
      }
      // if (flexWidth > 300) {
      //   // 设置最大宽度
      //   flexWidth = 300
      // }
      
      return flexWidth * flexperson;
    }

使用方式

这里使用的是elementUI,别的ui组件需要表格列下的width属性也能动态赋值才能下面那样写。先把这个函数引入到能调用到的地方，例放到vue组件methods: {}对象里。使用的话就是给width，把那些必要参数填上就行。参数不多 啊。

<el-table :data="tdata" style="font-size:12px">
  <el-table-column
        prop="conversionTime"
        align="left"
        :width="flexColumnWidth('转正日期', 'conversionTime', tdata, 12, 'px')"
        label="转正日期"
      >
  </el-table-column>
</el-table>