业务须要前端依据用户权限动态显示对应按钮，间接把操作列的列宽写死的话，在按钮少的状况下不是那么难看，所以想到了一个骚操作...
写死宽度时是这样的：
开始
给操作列绑定宽度属性
:width="actionColWidth < 80 ? 80 : actionColWidth"把操作列的所有按钮用一个div套起来
class="action-col"
<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); });看一下成果
没有按钮时：
有一个按钮：
有两个按钮：
有三个按钮：