ant-design-vue的table组件如何自适应列宽？

Question

比方说这个表格，手机号的内容宽度不够，换行了。

我想让每一列都按照内容的最大宽度设置，而且表格包含x轴滚动，请问怎么实现呢？

Answer 1

实现了么?

Answer 2

我理解两个地方改一下就行：

1. 设置表格内容不换行

   .ant-table-cell {
     white-space: nowrap
   }

2. 设置表格可横向滚动

     <a-table :scroll="{x: true}">

Answer 3

参考了一篇文章，需要计算下每列文字的最大宽度，下面的方法是用创建dom上树，获取到文本的宽度。用canvas画布获取宽度会精确一些。

function getTextWidth(str) {
  let width = 0;
  let html = document.createElement('span');
  html.innerText = str;
  html.className = 'getTextWidth';
  document.querySelector('body').appendChild(html);
  width = document.querySelector('.getTextWidth').offsetWidth;
  document.querySelector('.getTextWidth').remove();
  return width;
}
column = [
  {
    title: '姓名',
    dataIndex: 'name',
    align: 'center',
    key: '1'
  },
{
    title: '年龄',
    dataIndex: 'age',
    align: 'center',
    key: '2'
  },
function calculateColumnWidth(column,valArr) {
  column.map(v1=>{
    const arr = valArr.map(v2=> {return v2[v1.dataIndex]})
    // 把表头push进去对比
    arr.push(v1.title)
    v1.width = Math.max.apply(Math, arr.map(v2=> {return getTextWidth(v2)})) + 20 //20模拟padding
  })
}
calculateColumnWidth(column,valArr)
]

参考：
vue el-table 自适应表格内容宽度 - 黄小雪 - 博客园

Answer 4

一般来说，并不会去操作表头去增加自适应列宽。而是使用 width 固定列宽，比如说手机号码，一般来说都是13位的，那就大概看一下多少px可以让手机号不折行。
而对于一些超长的文本内容呢，一般来说是不增加固定列宽，让他去占据表格剩余空间。然后搭配 ellipsis 来做超出隐藏。

具体情况会如下：

Answer 5

表格X轴滚动可以设置：
:scroll="{ x: 1800 }"
固定tabld各项宽度，留一项宽度不设置：
column.width
表格过长并且fixed时，使用隐藏，否则框架有兼容问题：
column.ellipsis