Element: [Feature Request] 希望增加table组件列宽自适应的特性

[Creabine]

Existing Component

是

Component Name

Table

Description

目前的table列宽，只有width,min-width和fit属性。我们的需求是要根据数据循环输出不定列的table，其中有的列内容很多，有的内容很少。

能否增加新特性，使table能像原生表格一样被内容撑开，使得table列宽自适应内容呢？

谢谢：）

[element-bot]

Hi，请问能否提供这个功能或组件的参考链接？

[Creabine]

@element-bot 链接在这里 https://jsfiddle.net/pd7kbqoe/

[lingliMr]

赞同，希望支持！

[lizhengtan]

同求。。。。数据格式不确定时候太丑了。应该是比如在50字以内不会换行，50字以上自动省略最好

[forzalianjunting]

希望支持，数据长度不定时确实很麻烦

[yugasun]

目前个人实现是：

设置一个基准宽度，比如120px，内容转换为字符串长度为20，然后遍历列内容获取最长字符串长度len, 然后计算该列宽度为 120 * len / 20。

但是遍历表格所有内容就有个性能问题，所以这部分计算交给了服务器端，然后接口返回表头数据时，每个表头为一个对象，里面包含有关宽度的属性 col_width 值。

最后补充点个人看法：虽然这个功能的确需求很多，但是仔细想想，如果交给框架，要做到自适应，思路也差不多，一样会遇到性能问题，与其要求框架提供需求，不如自己想办法实现。

[Creabine]

@yugasun 计算字符串长度给相应的宽度是一个思路，我之前也想过但是被否决了，原因如下：
1.前后端交互的数据应该尽可能干净一些，为了一个布局问题去进行计算，再弄脏数据得不偿失；
2.像你说的性能问题，只是把计算从前端转嫁给了后端，大量访问的时候后端压力也会很大；
3.实际上解决这个问题并不需要去计算字符串长度，通过一些css布局就能实现，这是原生表格都支持的特性，不应该舍近求远。

最后，把问题交给后端不算解决了问题，只是一种妥协式的做法。解决问题的思路很好，但是我们希望的是能够有更好的方式去解决他，谢谢你的建议。

[yugasun]

@Creabine 你说的对，我的解决方法的确不太合理，等项目闲下来，要研究下使用css的方式解决，谢谢提醒，如果解决了，可以提个PR试试~

[Creabine]

@yugasun :+1:

[jun58]

@Creabine @yugasun 你们用css解决了吗？

[kkzzzzzz]

急需这样的功能

[dingyiming]

急需这样的功能

[YiuTerran]

这个很实用，因为有些列的长度是不固定的，根据内容动态调整比较好。再加上max-width和，show-overflow-tooltip就能完美解决问题

[lifanlingjue]

说拿CSS解决，数据都是异步灌进来的 单凭CSS能取到最长的 然后设宽度吗？况且即使写自适应 但是不同行的相同列 怎么共享一个属性？ 。。。

[yugasun]

的确最终还是css没法解决，还是需要遍历计算，这种功能还是别交给框架了.....

[navono]

CSS加tooltip

[furybean]

Sorry, we have no plan to support this.

[chping2125]

迫切需求

[charleylla]

希望官方支持表格自适应的功能，有些列的数据长度较短，但实际分配宽度时分配的很大

[woodens]

1年了，还是没好的解决办法？

[left-handed]

希望官方可以解决

[ddcatgg]

2年了……

[BH-M87]

2019了，还是没解决。

[BH-M87]

写段代码处理下这个问题吧。另外有个大坑，就是scroll x之后，，每一列都要给宽度但是最后一列不要给宽度，不然可能会对不齐。

const getTextLength = (str, textSize) =>
  ((str || '').replace(/[\u0391-\uFFE5]/g, 'aa').length / 2) * textSize;
const getColumnMaxLength = (dataSource, dataIndex, textSize, minWidth = 50) =>
  Math.max(
    minWidth,
    ...(dataSource || []).map(row => getTextLength(row[dataIndex], textSize)),
  );

export default (
  columns = [],
  dataSource = [],
  textSize = 16,
  minWidth,
  totalPadding = 16,
) => {
  const newColumns = (columns || []).map((column, index) => ({
    width:
      index < columns.length - 1
        ? getColumnMaxLength(
          dataSource,
          column.dataIndex || column.key,
          textSize,
          minWidth,
        ) + totalPadding
        : undefined,
    ...column,
  }));
  const totalWidth = newColumns.reduce(
    (accumulator, column) => accumulator + column.width || 0,
    0,
  );
  return {
    columns: newColumns,
    scroll: {
      x:
        totalWidth + columns.length > 0
          ? getColumnMaxLength(
            dataSource,
            columns[columns.length - 1].dataIndex ||
                columns[columns.length - 1].key,
            textSize,
            minWidth,
          )
          : minWidth,
    },
  };
};

[snowling444]

被关闭了

[legendJaden]

我基于 el-column 二次封装的支持"根据内容适应列宽"的 af-column 组件, 还支持自定义适应的比例, 大家看看怎么样~
https://github.com/legendJaden/AFTableColumn

[GuoBingxu1314]

还管不管了，官方一点音信没有了？

[Zeus-Iqd]

哎

[sin7777]

fix属性是没有起作用？

[Ooomelette]

2019年7月19了还没解决

[qingyuun]

这个问题还没解决吗？急需

[liyangyangi]

2019年8月21日了还没解决呢

[userCML]

2019年8月26了还没解决

[worldstop]

2019年 9.3 还没解决吗？产品后期提出来的，难搞哦，我是column循环遍历的。

[yhnbgfd]

bootstrap的table就支持的非常好，能否参考下呢？

[sdytybdbaba]

2019/9/19还没解决

[13548506407]

2019/9/25 还没解决

[miqidian]

2019/9/26还没解决

[lily000000]

2019/10/08 还没解决

[tianybr]

2019/10/10了

[liuyueqi18]

2019/10/11 还没解决

[weiweidong1993]

无语了 找到这里来了 都没解决

[wf1205952124]

2019/10/14

[dheart-joe]

2019/10/16

[linyuan0]

2019/10/28

[jiahui-xu]

2019/10/31

[jiegege1997]

2019/11/11

[xiaochengbanxia]

2019/11/22

[BH-M87]

别评论了，弃了这个库了。

[nevertback]

2019/11/29

[guguji5]

2019/12/03

[rowthan]

2019/12/04

[perany]

2019/12/06

[13548506407]

别评论了，自己研究下就知道这功能不是不做，是不好搞，需要自己去遍历数据长度，根据数据长度来给宽度，但是数字，英文，中文，符号宽度不一样又不能统一度量，这东西不好做的，我自己写了一个太麻烦了，而且计算量大不友好

[ouyangzx]

2019/12/07 打卡

[Reim]

还有个思路，里面的table改回 table-layout: auto;，内部的colgroup col标签再屏蔽掉(display:none),通过这个可以还原成原生table,🙄但是因为不管是iview还是element, table都是thead和tbody分开的两个table所以这么处理会导致thead，tbody对不齐。后续可以直接从dom层找到tbody对应的每一列的宽再赋给thead应该就可以了

[rowthan]

别评论了，自己研究下就知道这功能不是不做，是不好搞，需要自己去遍历数据长度，根据数据长度来给宽度，但是数字，英文，中文，符号宽度不一样又不能统一度量，这东西不好做的，我自己写了一个太麻烦了，而且计算量大不友好

其实也不是不好搞，原生table就是可以做到自动适配宽度的，不用计算字符来实现，就跟普通div一样自自动关机撑开，但是el-table将其做了固定宽度。

[BH-M87]

写段代码处理下这个问题吧。另外有个大坑，就是scroll x之后，，每一列都要给宽度但是最后一列不要给宽度，不然可能会对不齐。

const getTextLength = (str, textSize) =>
  ((str || '').replace(/[\u0391-\uFFE5]/g, 'aa').length / 2) * textSize;
const getColumnMaxLength = (dataSource, dataIndex, textSize, minWidth = 50) =>
  Math.max(
    minWidth,
    ...(dataSource || []).map(row => getTextLength(row[dataIndex], textSize)),
  );

export default (
  columns = [],
  dataSource = [],
  textSize = 16,
  minWidth,
  totalPadding = 16,
) => {
  const newColumns = (columns || []).map((column, index) => ({
    width:
      index < columns.length - 1
        ? getColumnMaxLength(
          dataSource,
          column.dataIndex || column.key,
          textSize,
          minWidth,
        ) + totalPadding
        : undefined,
    ...column,
  }));
  const totalWidth = newColumns.reduce(
    (accumulator, column) => accumulator + column.width || 0,
    0,
  );
  return {
    columns: newColumns,
    scroll: {
      x:
        totalWidth + columns.length > 0
          ? getColumnMaxLength(
            dataSource,
            columns[columns.length - 1].dataIndex ||
                columns[columns.length - 1].key,
            textSize,
            minWidth,
          )
          : minWidth,
    },
  };
};

之前写过的一段代码处理这个问题的。有需要的同学可以拿过去用。

[BH-M87]

过了这么久了，这个问题还在评论并且没有解决。。。。这个库看来要衰亡了。。

[Reim]

https://www.jianshu.com/p/7cface32436d

[y1324]

2019-12-27 准备跨年了

[cj12580]

马上2020年了 为么那么多人提这个需求 官方就是不改

[1243112190]

2019-12-31 还没改，再过十几个小时就要2020年了

[BladePiontStudio]

2020-01-20 2020年了哦

[ikangjie]

2020-01-03 这个问题还没得到很好的解决，有个基于element扩展的库可以解决，但是问题也挺多的
https://github.com/legendJaden/AFTableColumn

[isyoungxl]

9103-01-07 了，打印的时候用到多层表头，结果三个table的首列单元格宽度逐步增大，导致内容肉眼可见的并不对齐。手动覆盖样式强制让首列一样宽，结果也不影响后面几列的“错位”，咋搞呢

[hqzh]

可以参考antd实现

[WenkeChen]

Sorry, we have no plan to support this.

So, why? This is a very reasonable demand!

[snowdream]

2020年2月14日，希望此功能特性能够实现。

[Lynn-cc]

2020年2月27日，我们产品经理也来要求此功能了。

[Cast1R]

2020年3月7日，陪女朋友过节的我看到这个需求留下了眼泪

[hitaoqibao]

2020/03/16

[068089dy]

哈哈哈，真有意思，给爷整笑了

[BH-M87]

还在没弄好啊。。这个。。。

我觉得为啥不用脚投票呢？不用这个库了不就好了？

[boylfunc]

牛皮，真的牛皮

[BH-M87]

牛皮，真的牛皮

What is niubility?

[zzjdegit]

逐一看完了评论，看来很多人需要呀，刚好今天产品经理提了，看来~~~

[phpadminer]

哇 我老板也提出了这个需求..

[Sky-Gavin]

哇 心累，我也需要这个功能

[lygwy]

看完了所有评论，因为我真的需要这个功能

[Johnwjl]

确实需要宽度自适应的功能，希望官方能看到

[aa2086500]

现在这个 问题 是不是官方都不维护啦。。。。

[dengdengdengpan]

今天刚好也遇到了这个需求，因为电量很大，所以要展示很长的数字···

[Damujia]

内容不能撑开宽是真的头皮发麻

[Damujia]

表头也不能撑开，看来只能靠自己了

[zhangwenwu]

2020-06-11 老板提出了这个需求，

[zxf-boy]

2020/07/08 我是来找解决方案的，table向来都是需求极大的组件，希望官方重视起来

[webliuye]

我也来一波看看啊，需求很大啊。但是这个确实不好解决，等待强大的兄弟们，出问题。

[cj12580]

官方有看到吗，这么多人都有这个需求，为么就是不改！

[625103479]

2020/07/28 老板提出了这个需求

[mynameisxue]

2020/08/06 老板提出了这个需求

[Tommy-STCD]

2020/08/06 ui提出来这个需求

[BonnieCabrera]

我们也有这个问题，宽度没设置，就自动换行了，很丑的

[wxGoldking]

熟悉项目代码，发现全部是计算之后设置min-width, 太难看了，找来找去找到这，官方这么久都没有回应，太过分了

[wxGoldking]

element的table居然表头和body是两个table，奇葩啊

[SaberInoryKiss]

2020/10/19,组长提出这个需求

[nmtlws]

2020-10-27 老板提出来需求了。 三年了

[truebit]

Cannot believe that such a reasonable feature request could not be supported after 3 years.

[H-hao]

2021-01-05

[svenjia]

2021-1-7 此项目已经死了？

[qd256wd]

2021-1-26，我又来看了一下

[worldstop]

+1