bootstraptable列宽⾃适应内容_（⼏乎）完美实现eltable列宽
⾃适应
Element UI 是 PC 端⽐较流⾏的 Vue.js UI 框架，它的组件库基本能满⾜⼤部分常见的业务需求。但有时候会有⼀些定制性⽐较⾼的需求，组件本⾝可能没办法满⾜。最近在项⽬⾥就碰到了。
很多页⾯都需要⽤到表格组件el-table。如果没有给el-table-column指定宽度，默认情况下会平均分配给剩余的列。在列数⽐较多的情况，如果el-table宽度限定在容器内，单元格⾥的内容就会换⾏。强制不换⾏，内容要么在单元格内滚动，要么就会溢出或被截断。
产品想要的效果是：内容保持单⾏显⽰，列间距保持⼀致，表格超出容器允许⽔平滚动。el-table-column是⽀持设置固定宽度的，在内容宽度可预知的情况下，也能满⾜这个需求。问题就在于如何让列宽动态适应内容的宽度。在官⽅⽂档也没到这样的选项，应该是组件本⾝不⽀持。
技术⽅案
bootstrap项目
于是想到了动态计算内容宽度的⽅案。⽹上也有⼈提过这个思路，做法是根据内容字符数来计算宽度。这种⽅法有⼏个局限：
1. 内容必须是⽂本
2. 不同字符宽度不⼀，结算结果不够准确
3. 需要在渲染前操作数据，不利于解耦
我采⽤了另⼀种思路，还是动态计算内容宽度，但是根据实际渲染后的 DOM 元素宽度，这样就能解决上⾯三个问题。
具体怎么做呢？通过查看渲染

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。