根据表格内容长度自适应表格宽度

最新推荐文章于 2025-05-16 10:18:24 发布

xiaoxin6661111

最新推荐文章于 2025-05-16 10:18:24 发布

阅读量800

点赞数

CC 4.0 BY-SA版权

文章标签：前端 javascript vue.js

本文链接：https://blog.youkuaiyun.com/xiaoxin6661111/article/details/128050667

本文介绍如何在Vue.js项目中创建一个util文件夹，存放公共方法table-width.js，用于根据表格内容自动调整表格宽度。在main.js中引入该方法，并在具体表格组件上应用，以实现表格宽度的智能适配。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.在src里面新建util文件，用来存储公用的方法。

将table-width.js放进去

export default {
  flexColumnWidth(str, tableData, flag = "max") {
    // console.log(tableData)
    // str为该列的字段名(传字符串);tableData为该表格的数据源(传变量);
    // flag为可选值，可不传该参数,传参时可选'max'或'equal',默认为'max'
    // flag为'max'则设置列宽适配该列中最长的内容,flag为'equal'则设置列宽适配该列中第一行内容的长度。
    str = str + "";
    let columnContent = "";
    if (
      !tableData ||
      !tableData.length ||
      tableData.length === 0 ||
      tableData === undefined
    ) {
      return;
    }
    if (!str || !str.length || str.length === 0 || str === undefined) {
      return;
    }
    if (flag === "equal") {
      // 获取该列中第一个不为空的数据(内容)
      for (let i = 0; i < tableData.length; i++) {
        if (tableData[i][str].length > 0) {
          // console.log('该列数据[0]:', tableData[0][str])
          columnContent = tableData[i][str];
          break;
        }
      }
    } else {
      // 获取该列中最长的数据(内容)
      var index = 0;
      for (let i = 0; i < tableData.length; i++) {
        // console.log(index, i, '1')
        if (
          tableData[i][str] === null ||
          tableData[i][str] === undefined ||
          tableData[i][str] === ""
        ) {
          // console.log('undefined000')
          // return
        } else {
          console.log(tableData[i][str], "tableData[i][str]");
          const now_temp = tableData[i][str] + "";
          const max_temp = tableData[index][str] + "";
          // console.log(index)
          if (
            tableData[index][str] === null ||
            tableData[index][str] === undefined ||
            tableData[index][str] === ""
          ) {
            index = index + 1;
            if (now_temp.length > max_temp.length) {
              index = i;
              // columnContent = stateFormat(tableData[index][str])
            }
            // console.log(tableData[index][str],11111111111)
            columnContent = tableData[index][str];
            // console.log('该列数据[i]:', i, str, columnContent)
            // console.log(789789, tableData[index][str], tableData, str, index)
          } else {
            // console.log(tableData[index][str], '+', tableData[i][str], max_temp.length)
            if (now_temp.length > max_temp.length) {
              index = i;
              // columnContent = stateFormat(tableData[index][str])
            }
            // console.log(tableData[index][str],11111111111)
            columnContent = tableData[index][str];
            // console.log('该列数据[i]:', i, str, columnContent)
          }
        }
      }
    }
    // console.log('该列数据[i]:', columnContent)
    // 以下分配的单位长度可根据实际需求进行调整
    let flexWidth = 0;
    columnContent = columnContent + "";
    for (const char of columnContent) {
      if ((char >= "A" && char <= "Z") || (char >= "a" && char <= "z")) {
        // 如果是英文字符，为字符分配8个单位宽度
        flexWidth += 8;
      } else if (char >= "\u4e00" && char <= "\u9fa5") {
        // 如果是中文字符，为字符分配15个单位宽度
        flexWidth += 15;
      } else {
        // 其他种类字符，为字符分配8个单位宽度
        flexWidth += 10;
      }
    }
    if (flexWidth < 80) {
      // 设置最小宽度
      flexWidth = 80;
    }
    // if (flexWidth > 250) {
    //   // 设置最大宽度
    //   flexWidth = 250
    // }
    // console.log(flexWidth, str)
    return flexWidth + "px";
  }
};

2.在main.js里面写

import flexColumnWidth from "./util/table_width";

Vue.prototype.$flexColumnWidth = flexColumnWidth;

3.在你需要的表格上面写

<el-table-column
                prop="f"
                label="分享量"
                :width="_flexColumnWidth('f', tableData)"
              >
              </el-table-column>

4.然后写方法

_flexColumnWidth(str, tableData) {
      return this.$flexColumnWidth.flexColumnWidth(str, tableData)
    },