解决elementui表格操作列自适应列宽

转载自：https://www.jb51.net/article/203011.htm
给操作列绑定宽度属性

:width="actionColWidth < 80 ? 80 : actionColWidth"

把操作列的所有按钮用一个div套起来

<div class="action-col">
 <el-button></el-button>
 ...
</div>

data里设置列宽初始值

actionColWidth: 80, //表格操作列宽度

在表格数据请求回来赋值给表格之后，执行计算宽度的操作

这里是用jq获取表格第一行的全部按钮，然后把每个按钮的宽度加起来，就是操作列的宽度。

不用jq的话用原生js也行。

如果表格每一行的操作按钮是不一样的，那么就获取每一行操作按钮的总宽度，然后取最大的就行。这里没有这个需求，就不写了。

 getClerkList(params)
 .then((res) => {
  this.tableData = res.rows;

  this.$nextTick(() => {
  // 给表格操作列宽度多出25px，否则显示不完整
  let width = 25;
  // 使用jq遍历表格第一行操作列里的每一个按钮
  $(".action-col")
   .eq(0)
   .children(".el-button")
   .each(function () {
   // 把每个按钮的宽度加起来
   width += $(this).outerWidth(true);
   });
  // 把计算好的总宽度赋值给操作列宽
  this.actionColWidth = width;
  });
 })
 .catch((err) => {
  console.error(err);
 });

华丽的分割线*********
使用vue方式请求

  <el-table-column prop="evaluationAllType" align="center" label="xxx" :width="actionColWidth < 90 ? 90 : actionColWidth"> 
   <template slot-scope="scope"> 
    <div v-if="scope.row.evaluationAllType.length>0" class="dydBox" ref="dydBox"> 
     <template v-for="(item, index) in scope.row.evaluationAllType" style="font-size: 10px"> 
      <span :key="index" style="color: #334666; font-size: 12px;" :class="sstt[index]">{{ item }}</span> 
      <span v-if="index < scope.row.evaluationAllType.length-1" style="display: inline-block;width: 5px"></span> 
     </template> 
    </div> 
    <div v-else="" style="color: #7484a6; font-size: 13px"> 
     <span>未邀请测评</span> 
    </div> 
   </template> 
  </el-table-column>

// 获取方法
getlist() {
    this.$netClient.hxr_huoqu({
        ...
    }).then(res = >{
        this.tableData = res.data.data.data;
        this.$nextTick(() = >{
            // 给表格操作列宽度多出25px，否则显示不完整
            let width = 25;
            // 判断dydBox 是否存在且有孩子
            if (this.$refs.dydBox && this.$refs.dydBox.children) {
            	// 循环遍历每一个孩子获取宽度值，并相加
                this.$refs.dydBox.children.forEach((item) = >{
                    width += item.offsetWidth;
                });
                // 赋值给绑定值
                this.actionColWidth = width;
            } else {
            	// 表示这一块走了else里面，附一个刚好放下else文字的默认宽度
                this.actionColWidth = 90;
            }
        });
        this.total = res.data.data.totalRecord;
        this.$emit("dydPeopleArrCS", res.data.data.numData);
    }).
    catch(function(err) {});
},