解决elementui表格操作列自适应列宽
更新时间：2020年12月28日 12:02:41 作者：amao
这篇文章主要介绍了解决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表格操作列自适应列宽的文章就介绍到这了,更多相关elementui表格自适应列宽内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
您可能感兴趣的文章:
相关文章
这篇文章主要为大家详细介绍了Vue实现天气预报功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-08-08
最近开发遇到一个点击导入按钮让excel文件数据导入在表格的需求,所以下面这篇文章主要给大家介绍了关于vue导入处理Excel表格功能步骤的相关资料,需要的朋友可以参考下2022-07-07
这篇文章主要介绍了vue刷新页面时去闪烁提升体验方法,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2018-12-12
这篇文章主要介绍了element-ui自定义表格如何给input双向绑定数据，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
这篇文章主要为大家详细介绍了vue实现移动端可拖拽式icon图标，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
Vue通过Object.defineProperty来实现监听数据的改变和读取（属性中的getter和setter方法） 实现数据劫持。下面简单记录一下，vue监听数据变化的原理2023-01-01
这篇文章主要介绍了vuex 动态注册方法 registerModule的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-07-07
这篇文章主要介绍了graphQL在前端vue中使用过程,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-03-03
在配置路有的时候，陆续出现了各种报错其中最多的是一些写法，例如空格，缩进，各种括号，这篇文章主要介绍了关于vue的语法规则检测报错问题的解决，非常具有实用价值，需要的朋友可以参考下2018-05-05
这篇文章主要为大家介绍了vue为什么v-for的优先级比v-if高原理解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-05-05
最新评论