[Hot] How to implement el-table column width adaptive minimum width according to content length

I am very anxious to write this blog! ! Because when I first wanted to achieve this effect, I searched the Internet for a long time and searched a lot of information and blogs but could not find an effective method to achieve the effect. Or others said it was effective but I would get errors and it was difficult to solve. Finally, I figured it out myself!

Application scenarios

Many times, when making a table, we want the width of the column items to adjust adaptively with the width of the content, and do not want to wrap lines.

But before the data is imported, we don't know what the content width is, so there is no way to directly set a certain min-width to ensure that the content does not wrap. For example, this is (this is just an example of a table I wrote casually, so don’t get too hung up on the data):

 The effect I need to achieve is that the column width is adjusted according to the length of the longest item in my content item to achieve the following effect:

---

Our thinking is

• Dynamically calculate the width of each column: traverse the data array, get the width of each cell content, add column padding, and then take the maximum width as the column width.
• Dynamically create a <span> tag, set it to be invisible, absolutely positioned, and placed off-screen to get the actual width of the text. Then assign the text content to <span>, add it to the page, get its width, and then remove it.

Through the above method, you can achieve the effect of el-table column width adapting to the minimum width according to the content length.

Based on this idea, implement a method getColunmnWidth for use by table columns.

  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;
  }

 In the list code, directly pass in the parameter name and call the method

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

Personal test is effective! ! !

Then, you can encapsulate this method like me and use it for tables in multiple projects/multiple pages.

I won't post the complete code and encapsulation code. I hope everyone can understand it and implement it by themselves, and refuse to copy and paste directly!