【热】如何实现el-table列宽随内容长度自适应最小宽度

非常火急火燎的来写这篇博客!!因为自己一开始想实现这个效果时在网上查了很久查了很多资料和博客都没有找到能有效达到效果的方法,要么就是别人说有效但是我这里会报错而且难以解决。最后终于被我自己给摸索出来了!

应用场景

很多时候,在做表格时,我们希望列项的宽度随着内容宽度自适应调整,而不希望换行。

但在数据导入前,我们不知道内容宽度是多少,所以没办法直接设置确定的min-width去保证内容不换行。比如这样(这只是个我随便写的表格例子,不用太纠结于数据):

我需要达到的效果是,列宽根据我内容项里最长的一项调整长度实现下面这样子的效果:


我们的思路是

  • 动态计算每列的宽度:遍历数据数组,获取每单元格内容的宽度,并加上列内边距,然后取最大宽度作为列宽。
  • 动态创建一个<span>标签,将其设置为不可见、绝对定位并放置在屏幕外,以便获取文本的实际宽度。然后将文本内容赋值给<span>,将其添加到页面上,获取其宽度后再移除。

通过以上方法,就可以实现 el-table 列宽随内容长度自适应最小宽度的效果。

根据这个思路,实现一个方法getColunmnWidth供表格列项使用。

javascript 复制代码
  function getColumnWidth(prop) {
    const minWidth = 80; // 最小宽度
    const padding = 16; // 列内边距

    const contentWidths = assessments.map((item) => {
      const value = item[prop] ? String(item[prop]) : "";
      const textWidth = getTextWidth(value);
      return textWidth + padding;
    });

    const maxWidth = Math.max(...contentWidths);

    return Math.max(minWidth, maxWidth);
  }
  function getTextWidth(text) {
    const span = document.createElement("span");
    span.style.visibility = "hidden";
    span.style.position = "absolute";
    span.style.top = "-9999px";
    span.style.whiteSpace = "nowrap";
    span.innerText = text;
    document.body.appendChild(span);
    const width = span.offsetWidth + 5;
    document.body.removeChild(span);
    return width;
  }

在列表代码中,直接传入参数名称,调用方法即可

html 复制代码
<el-table-column
    prop="name"
    label="姓名"
    :min-width="getColumnWidth('name')"
/>

亲测有效!!!

然后呢,大家可以像我一样把这个方法进行封装供多个项目/多个页面的表格使用。

完整代码和封装代码我就不发出来了,希望大家可以看懂了之后自己实现出来,拒绝直接复制粘贴!

相关推荐
脑袋大大的3 小时前
JavaScript 性能优化实战:减少 DOM 操作引发的重排与重绘
开发语言·javascript·性能优化
速易达网络4 小时前
RuoYi、Vue CLI 和 uni-app 结合构建跨端全家桶方案
javascript·vue.js·低代码
耶啵奶膘4 小时前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app
JoJo_Way4 小时前
LeetCode三数之和-js题解
javascript·算法·leetcode
视频砖家5 小时前
移动端Html5播放器按钮变小的问题解决方法
前端·javascript·viewport功能
lyj1689975 小时前
vue-i18n+vscode+vue 多语言使用
前端·vue.js·vscode
GISer_Jing8 小时前
Monorepo+Pnpm+Turborepo
前端·javascript·ecmascript
天涯学馆8 小时前
前端开发也能用 WebAssembly?这些场景超实用!
前端·javascript·面试
我在北京coding9 小时前
TypeError: Cannot read properties of undefined (reading ‘queryComponents‘)
前端·javascript·vue.js