如何让elementui表格操作列自适应列宽更智能？

本文共计512个文字，预计阅读时间需要3分钟。

业务需求需要前端根据用户权限动态显示对应按钮，直接将操作序列的列宽写死。在按钮较少的情况下不是那么好看，所以想到了一个解决方案：+开始+给操作序列绑定宽度。

业务需要前端根据用户权限动态显示对应按钮，直接把操作列的列宽写死的话，在按钮少的情况下不是那么好看，所以想到了一个骚操作...

写死宽度时是这样的：

开始

给操作列绑定宽度属性

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

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

class="action-col"

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

data里设置列宽初始值

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

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

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

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

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