解决elementui表格操作列⾃适应列宽
业务需要前端根据⽤户权限动态显⽰对应按钮，直接把操作列的列宽写死的话，在按钮少的情况下不是那么好看，所以想到了⼀个骚操作...
写死宽度时是这样的：
开始
给操作列绑定宽度属性
:width="actionColWidth < 80 ? 80 : actionColWidth"element表格横向滚动条
把操作列的所有按钮⽤⼀个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 = ws;
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) => {
<(err);
});
看⼀下效果
没有按钮时：
有⼀个按钮：
有两个按钮：
有三个按钮：
到此这篇关于解决elementui表格操作列⾃适应列宽的⽂章就介绍到这了，更多相关elementui表格⾃适应列宽内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。