elementui表格中的列怎么实现自适应列宽-创新互联

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

 
 ...

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);
 });

上述就是小编为大家分享的elementui表格中的列怎么实现自适应列宽了，如果刚好有类似的疑惑，不妨参照上述分析进行理解。如果想知道更多相关知识，欢迎关注创新互联行业资讯频道。