解决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 相关文章推荐
在线游戏大家来找茬II
Sep 30 Javascript
分享10个原生JavaScript技巧
Apr 20 Javascript
jQuery检测滚动条是否到达底部
Dec 15 Javascript
微信小程序(应用号)开发新闻客户端实例
Oct 24 Javascript
ECMAScript6--解构
Mar 30 Javascript
vue实现手机号码抽奖上下滚动动画示例
Oct 18 Javascript
C#实现将一个字符转换为整数
Dec 12 Javascript
vue 解决循环引用组件报错的问题
Sep 06 Javascript
详解服务端预渲染之Nuxt(介绍篇)
Apr 07 Javascript
详解vue-flickity的fullScreen功能实现
Apr 07 Javascript
vue的$http的get请求要加上params操作
Nov 12 Javascript
低门槛开发iOS、Android、小程序应用的前端框架详解
Oct 16 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
中国第一家无线电行
2021/03/01 无线电
十天学会php之第五天
2006/10/09 PHP
用PHP实现Ftp用户的在线管理的代码
2007/03/06 PHP
phpMyAdmin2.11.6安装配置方法
2008/08/24 PHP
《PHP编程最快明白》第五讲:php目录、文件操作
2010/11/01 PHP
php中大括号作用介绍
2012/03/22 PHP
使用php发送有附件的电子邮件-(PHPMailer使用的实例分析)
2013/04/26 PHP
php使用imagick模块实现图片缩放、裁剪、压缩示例
2014/04/17 PHP
php数组键值用法实例分析
2015/02/27 PHP
PHP内核探索之变量
2015/12/22 PHP
PHP文件缓存smarty模板应用实例分析
2016/02/26 PHP
PHP载入图像imagecreatefrom_gif_jpeg_png系列函数用法分析
2016/11/14 PHP
PHP反射原理与用法深入分析
2019/09/28 PHP
JS生成一维码(条形码)功能示例
2017/01/19 Javascript
Vue中对拿到的数据进行A-Z排序的实例
2018/09/25 Javascript
js时间戳转yyyy-MM-dd HH-mm-ss工具类详解
2019/04/30 Javascript
vue-cli+axios实现文件上传下载功能(下载接收后台返回文件流)
2019/05/10 Javascript
js实现随机8位验证码
2020/07/24 Javascript
vue移动端下拉刷新和上滑加载
2020/10/27 Javascript
k8s node节点重新加入master集群的实现
2021/02/22 Javascript
Python2.x与Python3.x的区别
2016/01/14 Python
用Python实现斐波那契(Fibonacci)函数
2016/03/25 Python
详解将Django部署到Centos7全攻略
2018/09/26 Python
Python数据类型之Number数字操作实例详解
2019/05/08 Python
Python在Matplotlib图中显示中文字体的操作方法
2019/07/29 Python
Python分析微信好友性别比例和省份城市分布比例的方法示例【基于itchat模块】
2020/05/29 Python
keras训练浅层卷积网络并保存和加载模型实例
2020/07/02 Python
送货司机岗位职责
2013/12/11 职场文书
美容师的职业规划书
2013/12/27 职场文书
货车司机岗位职责
2014/03/18 职场文书
群教班子对照检查材料
2014/08/26 职场文书
委托公证书格式
2015/01/26 职场文书
2015年端午节活动总结
2015/02/11 职场文书
甲午大海战观后感
2015/06/02 职场文书
初中语文教师研修日志
2015/11/13 职场文书
Python图像处理之图像拼接
2021/04/28 Python