解决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之水平横向滚动歌词同步的应用
May 07 Javascript
IE6 fixed的完美解决方案
Mar 31 Javascript
jQuery验证Checkbox是否选中的代码 推荐
Sep 04 Javascript
node.js中的fs.exists方法使用说明
Dec 17 Javascript
jQuery简单实现隐藏以及显示特效
Feb 26 Javascript
Javascript中字符串和数字的操作方法整理
Jan 22 Javascript
ES6中Iterator与for..of..遍历用法分析
Mar 31 Javascript
JavaScript实现简单的星星评分效果
May 18 Javascript
JS实现匀加速与匀减速运动的方法示例
Sep 04 Javascript
详细介绍RxJS在Angular中的应用
Sep 23 Javascript
JavaScript函数绑定用法实例分析
Nov 14 Javascript
vue 监听窗口变化对页面部分元素重新渲染操作
Jul 28 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获取$_POST同名参数数组的实现介绍
2013/06/30 PHP
php实现的一个简单json rpc框架实例
2015/03/30 PHP
thinkPHP连接sqlite3数据库的实现方法(附Thinkphp代码生成器下载)
2016/05/27 PHP
表格 隔行换色升级版
2009/11/07 Javascript
与jquery serializeArray()一起使用的函数,主要来方便提交表单
2011/01/31 Javascript
jquery选择器之内容过滤选择器详解
2014/01/27 Javascript
js网页右下角提示框实例
2014/10/14 Javascript
jQuery插件Slider Revolution实现响应动画滑动图片切换效果
2015/06/05 Javascript
简介JavaScript中的sub()方法的使用
2015/06/08 Javascript
实现音乐播放器的代码(html5+css3+jquery)
2015/08/04 Javascript
基于jquery实现全屏滚动效果
2015/11/26 Javascript
jQuery插件ajaxFileUpload使用详解
2017/01/10 Javascript
使用vue-resource进行数据交互的实例
2017/09/02 Javascript
bootstrap3中container与container_fluid外层容器的区别讲解
2017/12/04 Javascript
原生js实现公告滚动效果
2021/01/10 Javascript
分享Angular http interceptors 拦截器使用(推荐)
2019/11/10 Javascript
Vue组件为什么data必须是一个函数
2020/06/11 Javascript
JS运算符优先级与表达式示例详解
2020/09/04 Javascript
使用python删除nginx缓存文件示例(python文件操作)
2014/03/26 Python
使用py2exe在Windows下将Python程序转为exe文件
2016/03/04 Python
python版opencv摄像头人脸实时检测方法
2018/08/03 Python
python 3调用百度OCR API实现剪贴板文字识别
2018/09/04 Python
对python字典过滤条件的实例详解
2019/01/22 Python
pytest中文文档之编写断言
2019/09/12 Python
python中sklearn的pipeline模块实例详解
2020/05/21 Python
解决Pyinstaller打包软件失败的一个坑
2021/03/04 Python
希尔顿酒店中国网站:Hilton中国
2017/03/11 全球购物
德国高品质男装及配饰商城:Cultizm(Raw Denim原色牛仔裤)
2018/04/16 全球购物
英国手工制作的现代与经典的沙发和床:Love Your Home
2020/09/26 全球购物
医院总经理岗位职责
2014/02/04 职场文书
“四风”查摆问题自我剖析材料
2014/09/27 职场文书
教师查摆问题及整改措施
2014/10/11 职场文书
优秀员工事迹材料
2014/12/20 职场文书
加强党性修养心得体会
2016/01/21 职场文书
记一次Mysql不走日期字段索引的原因小结
2021/10/24 MySQL
Python经常使用的一些内置函数
2022/04/11 Python