解决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 触发HTML元素绑定的函数
Sep 11 Javascript
jQuery ajax调用WCF服务实例
Jul 16 Javascript
使用JavaScript实现连续滚动字幕效果的方法
Jul 07 Javascript
C#中使用迭代器处理等待任务
Jul 13 Javascript
js编写贪吃蛇的小游戏
Aug 24 Javascript
jQuery中的insertBefore(),insertAfter(),after(),before()区别介绍
Sep 01 Javascript
HTML5canvas 绘制一个圆环形的进度表示实例
Dec 16 Javascript
微信小程序 ecshop地址三级联动实现实例代码
Feb 28 Javascript
Angular5中提取公共组件之radio list的实例代码
Jul 10 Javascript
微信小程序实现星级评价效果
Dec 28 Javascript
vue基础之事件v-onclick=&quot;函数&quot;用法示例
Mar 11 Javascript
详解webpack的文件监听实现(热更新)
Sep 11 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
.htaccess文件保护实例讲解
2011/02/06 PHP
php懒人函数 自动添加数据
2011/06/28 PHP
php自动给文章加关键词链接的函数代码
2012/11/29 PHP
PHP列出MySQL中所有数据库的方法
2015/03/12 PHP
PHP关联数组实现根据元素值删除元素的方法
2015/06/26 PHP
Mac下php 5升级到php 7的步骤详解
2017/04/26 PHP
thinkPHP5框架实现基于ajax的分页功能示例
2018/06/12 PHP
jQuery使用手册之一
2007/03/24 Javascript
MooTools 1.2中的Drag.Move来实现拖放
2009/09/15 Javascript
JavaScript 对象链式操作测试代码
2010/04/25 Javascript
jquery 获取 outerHtml 包含当前节点本身的代码
2014/10/30 Javascript
浅析Bootstrap缩略图组件与警示框组件
2016/04/29 Javascript
Javascript将数值转换为金额格式(分隔千分位和自动增加小数点)
2016/06/22 Javascript
Node.js文件编码格式的转换的方法
2018/04/27 Javascript
nodejs文件夹深层复制功能
2019/09/03 NodeJs
解决layer 关闭当前弹窗 关闭遮罩层 input值获取不到的问题
2019/09/25 Javascript
Vue父子传递实例讲解
2020/02/14 Javascript
详解Vue中的Props与Data细微差别
2020/03/02 Javascript
javascript设计模式 ? 外观模式原理与用法实例分析
2020/04/15 Javascript
Vue Element校验validate的实例
2020/09/21 Javascript
Python中列表的一些基本操作知识汇总
2015/05/20 Python
Python实现发送QQ邮件的封装
2017/07/14 Python
在Python web中实现验证码图片代码分享
2017/11/09 Python
python实现朴素贝叶斯算法
2018/11/19 Python
Pycharm 设置默认解释器路径和编码格式的操作
2021/02/05 Python
Html5饼图绘制实现统计图的方法
2020/08/05 HTML / CSS
入党积极分子思想汇报范文
2014/01/05 职场文书
梅花魂教学反思
2014/04/25 职场文书
简单的离婚协议书范本
2014/11/16 职场文书
学校捐书活动总结
2015/05/08 职场文书
单位考核鉴定意见
2015/06/05 职场文书
生死牛玉儒观后感
2015/06/11 职场文书
详解python网络进程
2021/06/15 Python
Javascript之datagrid查询详解
2021/09/15 Javascript
redis击穿 雪崩 穿透超详细解决方案梳理
2022/03/17 Redis
《堡垒之夜》联动《刺客信条》 4月7日正式上线
2022/04/06 其他游戏