Vue3 elmentplus表格组件随文字自适应宽度

1.在文件utils/index.ts 文件里封装方法

export function flexWidth(prop, pageData, title, num = 0) {
  console.log(prop, pageData, title, num, "1111");

  if (pageData.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 = 0;
    for (let i = 0; i < pageData.length; i++) {
      const now_temp = pageData[i][prop] + "";
      const max_temp = pageData[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 = pageData[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;
  if (flexWidth > 240) {
    flexWidth = 240;
  }
  if (flexWidth < 80) {
    flexWidth = 80;
  }

  return flexWidth + "px";
}

2.组件使用

<template>
  <el-table
    v-loading="loading"
    :data="tableData"
    :height="700"
    show-overflow-tooltip
    border
  >
    <el-table-column type="selection" width="55" align="center" />
    <!-- <el-table-column :width="flexWidth('plantName', cfgList, '工厂')"  :render-header="defaultHeaderRenderer"  label="物料仓储配置ID" align="center" prop="basePartWhCfgId" /> -->
 
    <el-table-column
      prop="date"
      label="日期"
      :min-width="flexWidth('date', tableData, '日期')"
    ></el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      :min-width="flexWidth('name', tableData, '姓名')"
    ></el-table-column>
    <el-table-column
      prop="a"
      label="a"
      :min-width="flexWidth('a', tableData, 'a')"
    ></el-table-column>
    <el-table-column
      prop="b"
      label="奥德赛sad阿萨德阿萨德"
      :min-width="flexWidth('b', tableData, '奥德赛sad阿萨德阿萨德')"
    ></el-table-column>
    <el-table-column
      prop="c"
      label="c"
      :min-width="flexWidth('c', tableData, 'c')"
    ></el-table-column>
    <el-table-column
      prop="d"
      label="d"
      :min-width="flexWidth('d', tableData, 'd')"
    ></el-table-column>
    <el-table-column
      prop="e"
      label="e"
      :min-width="flexWidth('e', tableData, 'e')"
    ></el-table-column>
    <el-table-column
      prop="f"
      label="f"
      :min-width="flexWidth('f', tableData, 'f')"
    ></el-table-column>
  </el-table>
</template>
 
<script setup>
import { onMounted } from "vue";
import f from "../../utails/tableWidth";
console.log(f.flexWidth);
let { flexWidth } = f;
const tableData = [
  {
    date: "2016-05-03",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
    a: "dskajdskdjajs",
    b: "我请假阿拉山口大家啊手机打卢萨卡登记阿萨达撒考虑到",
    c: "大四季豆萨达",
    d: "近段时间快进到拉屎肯德基啊受打击阿拉双打卡酸辣的卡萨漏打卡索拉卡打色卡打蜡师大暨大",
    e: "打卡机啊留点时间阿斯卡大家啊雷声大数控刀具按上",
    f: "文件哦啊接收到哦啊世界大萨达",
  },
  {
    date: "2016-05-02",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
    a: "dskajdskdjajs",
    b: "我请假阿拉山口大家啊手机打卢萨卡登记阿萨达撒考虑到",
    c: "大四季豆萨达",
    d: "近段时间快进到拉屎肯德基啊受打击阿拉双打卡酸辣的卡萨漏打卡索拉卡打色卡打蜡师大暨屎肯德基啊受打击阿拉双打卡酸辣的卡萨漏打卡索拉卡打色卡打蜡师大暨大",
    e: "打卡机啊留点时间阿斯卡大家啊雷声大数控刀具按上",
    f: "文件哦啊接收到哦啊世界大萨达",
  },
  {
    date: "2016-05-04",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
    a: "dskajdskdjajs",
    b: "我请假阿拉山口大家啊手机打卢萨卡登记阿萨达撒考虑到",
    c: "大四季豆萨达",
    d: "近段时间快进到拉屎肯德基啊受打击阿拉双打卡酸辣的卡萨漏打卡索拉卡打色卡打蜡师大暨大",
    e: "打卡机啊留点时间阿斯卡大家啊雷声大数控刀具按上",
    f: "文件哦啊接收到哦啊世界大萨达",
  },
  {
    date: "2016-05-01",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
    a: "dskajdskdjajs",
    b: "我请假阿拉山口大家啊手机打卢萨卡登记阿萨达撒考虑到",
    c: "大四季豆萨达",
    d: "近段时间快进到拉屎肯德基啊受打击阿拉双打卡酸辣的卡萨漏打卡索拉卡打色卡打蜡师大暨大",
    e: "打卡机啊留点时间阿斯卡大家啊雷声大数控刀具按上",
    f: "文件哦啊接收到哦啊世界大萨达",
  },
];
</script>