DDR爱好者之家 Design By 杰米
业务需要前端根据用户权限动态显示对应按钮,直接把操作列的列宽写死的话,在按钮少的情况下不是那么好看,所以想到了一个骚操作...
写死宽度时是这样的:
开始
给操作列绑定宽度属性
:width="actionColWidth < 80 "
把操作列的所有按钮用一个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); });
看一下效果
没有按钮时:
有一个按钮:
有两个按钮:
有三个按钮:
DDR爱好者之家 Design By 杰米
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
DDR爱好者之家 Design By 杰米
暂无评论...
更新日志
2024年06月14日
2024年06月14日
- 陈百强《感恩有你》DSD+SBM版[WAV+CUE][560MB]
- 世界启元光秀强度怎么样 光秀属性面板解析
- 世界启元古希腊文明怎么样 古希腊文明选择推荐
- 世界启元法兰西文明怎么样 法兰西文明选择推荐
- 群星《极度深情3CD》[WAV分轨]
- 群星《极品HIFI·女声情烧30首HQCD》2CD[WAV]
- 闽南语发烧音乐至尊典藏-《迷醉的歌声·声声醉》[WAV】
- 悔悟了?IGN法国为《黑神话》争议言论正式致歉
- Xbox发布会汇总:战争机器、毁灭战士新作亮相!
- IGN法国无知发言开团《黑神话》:金箍棒不是棉签
- 群星.2002-欢庆迪斯尼100周年3CD【滚石】【WAV+CUE】
- DRY.1998-TWO【正东】【WAV+CUE】
- 马常胜.2012-油菜花开的季节【风潮】【WAV+CUE】
- 世界启元光秀命运羁绊怎么样 光秀命运羁绊介绍
- 世界启元不列颠文明怎么样 不列颠文明选择推荐