比较好用的调节Table表格的表头和内容的宽度的方法

因为大部分的Table组件的表头宽度不太适合我们所使用的，我们可以通过封装函数来适应表头的宽度。

getColumnWidth(label, prop, tableData) {

      //label表头名称

      //prop对应的内容

      //tableData表格数据

      const minWidth = 150; // 最小宽度

      const padding = 20; // 列内边距

      let arr = tableData.map((item) => item[prop]);

      arr.push(label); //拼接内容和表头数据

      const contentWidths = arr.map((item) => {

        const value = item ? String(item) : "";

        const textWidth = this.getTextWidth(value);

        return textWidth + padding;

      });

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

      return Math.max(minWidth, maxWidth);

    },

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 + 40;

      document.body.removeChild(span);

      return width;

    },

通过绑定width的方法实现自适应文字宽度 :width="getColumnWidth("表头名称", "表头字段名", "绑定table的数组")