table 操作列宽度自适应

 <el-table :data="tableData" style="width: 100%" :border="true" fit>
      <el-table-column type="index" width="50" label="No" fixed> </el-table-column>
      <el-table-column prop="date" label="日期" width="150" fixed> </el-table-column>
      <el-table-column prop="name" label="姓名" width="120"> </el-table-column>
      <el-table-column prop="province" label="省份" width="120"> </el-table-column>
      <el-table-column prop="address" label="地址" minWidth="260"> </el-table-column>
      <el-table-column prop="zip" label="邮编" minWidth="120"> </el-table-column>

      <el-table-column label="操作" fixed="right" :render-header="renderHeader" :key="Math.random()">
        <template slot-scope="scope">
          <div class="optionDiv" style="white-space: nowrap; display: inline-block">
            <el-button type="text" size="small"> 新增 </el-button>
            <el-button type="text" size="small"> 编辑 </el-button>
            <el-button v-if="scope.row.type == 2 || scope.row.type == 3" type="text" size="small"> 移除 </el-button>
            <el-button v-if="scope.row.type == 2 || scope.row.type == 3" type="text" size="small"> 详情 </el-button>
            <el-button v-if="scope.row.type == 3 || scope.row.type == 3" type="text" size="small"> 下发 </el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>

render

methods: {
    // 表头部重新渲染
    renderHeader(h, { column, $index }) {
      // 获取操作按钮组的元素
      const opts = document.getElementsByClassName('optionDiv');
      let widthArr = [];
      // 取操作组的最大宽度
      Array.prototype.forEach.call(opts, function (item) {
        if (item.innerText) {
          widthArr.push(item.offsetWidth);
        }
      });
      // 重新设置列标题及宽度属性
      if (widthArr.length > 0) {
        column.width = Math.max(...widthArr) + 24;
        return h('span', column.label);
      } else {
        column.width = 0;
        return h('span', column.label);
      }
    }
  }