解决elementui表格操作列自适应列宽


Posted in Javascript onDecember 28, 2020

业务需要前端根据用户权限动态显示对应按钮,直接把操作列的列宽写死的话,在按钮少的情况下不是那么好看,所以想到了一个骚操作...

写死宽度时是这样的:

解决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表格操作列自适应列宽

有两个按钮:

解决elementui表格操作列自适应列宽

有三个按钮:

解决elementui表格操作列自适应列宽

到此这篇关于解决elementui表格操作列自适应列宽的文章就介绍到这了,更多相关elementui表格自适应列宽内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
javascript call和apply方法
Nov 24 Javascript
通过继承IHttpHandle实现JS插件的组织与管理
Jul 13 Javascript
js与jQuery 获取父窗、子窗的iframe
Dec 20 Javascript
JS函数重载的解决方案
May 13 Javascript
javascript匿名函数实例分析
Nov 18 Javascript
javascript中的正则表达式使用指南
Mar 01 Javascript
理解javascript中的MVC模式
Jan 28 Javascript
node.js实现快速截图
Aug 27 Javascript
Javascript计算二维数组重复值示例代码
Dec 18 Javascript
JavaScript中的相等操作符使用详解
Dec 21 Javascript
通过实例解析JavaScript常用排序算法
Sep 02 Javascript
解决ant Design中this.props.form.validateFields未执行的问题
Oct 27 Javascript
微信小程序视频弹幕发送功能的实现
Dec 28 #Javascript
React实现todolist功能
Dec 28 #Javascript
mustache.js实现首页元件动态渲染的示例代码
Dec 28 #Javascript
11个Javascript小技巧帮你提升代码质量(小结)
Dec 28 #Javascript
vue中watch的用法汇总
Dec 28 #Vue.js
浅析vue中的nextTick
Dec 28 #Vue.js
js仿淘宝放大镜效果
Dec 28 #Javascript
You might like
php设计模式 FlyWeight (享元模式)
2011/06/26 PHP
php数组的一些常见操作汇总
2011/07/17 PHP
php全排列递归算法代码
2012/10/09 PHP
PHP实现发送邮件的方法(基于简单邮件发送类)
2015/12/17 PHP
PHP+ajax实现获取新闻数据简单示例
2018/05/08 PHP
解决使用attachEvent函数时,this指向被绑定的元素的问题的方法
2007/08/13 Javascript
fckeditor 获取文本框值的实现代码
2009/02/09 Javascript
jQuery UI-Draggable 参数集合
2010/01/10 Javascript
jquery插件tooltipv顶部淡入淡出效果使用示例
2013/12/05 Javascript
js 通用订单代码
2013/12/23 Javascript
Jquery插件easyUi表单验证提交(示例代码)
2013/12/30 Javascript
JS实现带缓冲效果打开、关闭、移动一个层的方法
2015/05/09 Javascript
jQuery超简单选项卡完整实例
2015/09/26 Javascript
详解nodejs与javascript中的aes加密
2016/05/22 NodeJs
禁止弹窗中蒙层底部页面跟随滚动的几种方法
2017/12/07 Javascript
js获取html页面代码中图片地址的实现代码
2018/03/05 Javascript
vue源码解析之事件机制原理
2018/04/21 Javascript
js for终止循环 跳出多层循环
2018/10/04 Javascript
20个必会的JavaScript面试题(小结)
2019/07/02 Javascript
解决layui 表单元素radio不显示渲染的问题
2019/09/04 Javascript
JavaScript canvas基于数组生成柱状图代码实例
2020/03/06 Javascript
jQuery实现回到顶部效果
2020/10/19 jQuery
针对Vue路由history模式下Nginx后台配置操作
2020/10/22 Javascript
python sqlobject(mysql)中文乱码解决方法
2008/11/14 Python
Python实现的简单发送邮件脚本分享
2014/11/07 Python
使用python 和 lint 删除项目无用资源的方法
2017/12/20 Python
纯HTML5+CSS3制作生日蛋糕代码
2016/11/16 HTML / CSS
Under Armour安德玛意大利官网:美国高端运动科技品牌
2020/01/16 全球购物
俄罗斯在线服装店:STOLNIK
2021/03/07 全球购物
营销与策划个人求职信
2013/09/22 职场文书
《跨越海峡的生命桥》教学反思
2014/02/24 职场文书
2014年五四青年节演讲比赛方案
2014/04/22 职场文书
党委书记群众路线对照检查材料思想汇报
2014/10/04 职场文书
2016父亲节感恩话语
2015/12/09 职场文书
quickjs 封装 JavaScript 沙箱详情
2021/11/02 Javascript
css弧边选项卡的项目实践
2023/05/07 HTML / CSS