element table 列宽根据内容自适应

我上一篇发布如何优化官网写的table表格的写法，但是他的列宽不能自适应，于是我觉得官网会增加某个属性控制列宽

我试了 直接加 fit 或者 :fit="true"都不好使，我看到网上有些人去动态计算内容的宽度，但是效果不好，有时还会过宽！
于是我找到一个基于 element-ui 组件库的 el-table-column 组件, 支持自适应列宽功能
https://github.com/legendJaden/AFTableColumn

       <af-table-column
                    v-for="{ prop, label } in colConfigs"
                    :key="prop"
                    :prop="prop"
                    :label="label" >
                  </af-table-column>
          <el-table-column
            fixed="right"
            label="操作" width="150">
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="dialogFormVisible = true" >评价</el-button>
              <!--查看评价-->
              <el-dialog title="评价详情" :visible.sync="dialogFormVisible">
              <div>
                <span class="comment" >评分</span>
              </div>
              </el-dialog>
              <el-button
                size="mini"
                type="danger"
                @click="dialogTableVisible = true" >打印</el-button>
              <!--打印服务协议-->
              <el-dialog title="打印详情" :visible.sync="dialogTableVisible">
                <div>打印</div>
              </el-dialog>
            </template>
          </el-table-column>

实现效果图：

窗口缩小效果图：