这期内容当中小编将会给大家带来有关elementui表格中的列怎么实现自适应列宽，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。
开始
给操作列绑定宽度属性
: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);
});上述就是小编为大家分享的elementui表格中的列怎么实现自适应列宽了，如果刚好有类似的疑惑，不妨参照上述分析进行理解。如果想知道更多相关知识，欢迎关注亿速云行业资讯频道。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
