业务需要前端根据用户权限动态显示对应按钮,直接把操作列的列宽写死的话,在按钮少的情况下不是那么好看,所以想到了一个骚操作...
写死宽度时是这样的:
给操作列绑定宽度属性
: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表格自适应列宽内容请搜索站长技术以前的文章或继续浏览下面的相关文章希望大家以后多多支持站长技术!
如果你想对使用手机,平板电脑和辅助技术的用户隐藏某些内容,而只对键盘用户显...
Linux 发行版的爱好者们又有全新的 Linux 可以体验了,日前一款名为 TeLOS 的 Li...
今天给大家分享四个在实际开发中,比较实用的SQL Server脚本函数,希望对大家能...
Eval 计算一个表达式的值并返回结果。 语法:[result = ]eval_r(expression_r) e...
一. RabbitMQ 简介 MQ全称为Message Queue, 消息队列(MQ)是一种应用程序对应用...
最近在和团队规划OKR目标的时候,我们讨论了很多问题,我先抛砖引玉,列举了一些...
一、导读 本文主要介绍Redhat7.6系统安装oracle 12201版本RAC的一些坑以及避坑方...
Afrikaans:af Albanian:sq Basque:eu Belarusian:be Bulgarian:bg Catalan:ca Ch...
本文分享自华为云社区《 架构可视化支撑系统演进探索 》原文作者无名小溪。 随着...
ajax传送json格式数据,关键是指定contentType,data要是json格式 如果是restful...