element-ui表格根据文字自适应宽度

在之前的项目中遇到了一个挺难已搞定的问题。自己封装了一个根据传递的数组自己生成表格的组件。但是因为组件中的每一个表格都是根据数据生成的，所以每一个表格的宽度都是固定的，我们没有办法去手动改变。element-ui也给了相关的fit的属性，但是用起来并不尽人意。通过在各个前端群里的冒泡有人给提供了如下的解决方案。

使用 af-table-column 解决

af-table-column，该组件需要我们npm下载后使用。主要功能就是使表格根据内容自适应宽度。

安装

npm install af-table-column

在main.js中引入

import AFTableColumn from 'af-table-column'
 
Vue.use(AFTableColumn)

使用

<af-table-column label="列1" prop="field1"></af-table-column>

使用该标签也支持element-ui原有的el-table-column，可以理解为改标签实在原有的基础上新加了表格自适应功能。