elementui表格宽度适应内容_elementui表格中的列怎么实现自适应列宽
elementui表格中的列怎么实现自适应列宽
发布时间:2020-12-28 14:58:04
来源:亿速云
阅读:53
作者:Leah
这期内容当中小编将会给大家带来有关elementui表格中的列怎么实现自适应列宽,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。
开始
给操作列绑定宽度属性:width="actionColWidth
把操作列的所有按钮用一个div套起来
class="action-col"
...
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表格操作列自适应列宽代码示例,文章代码介绍的很详细,小编觉得挺不错的,现在分享给大家供大家参考,有需要的小伙伴们可以来看看. 写死宽度时是这样的: 开始 ...
- 文章内容中表格宽度超过内容区自动在外层添加div和样式并在电脑端可滑动浏览
HTML部分: <div class="newscon" id="conbox"> <table> <tbody><t ...
- html的表格宽度单位选项,css表格宽度用什么设置?
一般是用table{width="xx"}来表示整个表格的宽度,单位是像素.用td{width="xx"}表示单个表格内的宽度,单位是像素. css使用widt ...
- elementui表格宽度适应内容_element ui 表格高度自适应
首先给表格初始一个高度 tableHeight: (window.innerHeight || document.documentElement.clientHeight || document.bo ...
- elementui表格宽度适应内容_解决elementui表格操作列自适应列宽
业务需要前端根据用户权限动态显示对应按钮,直接把操作列的列宽写死的话,在按钮少的情况下不是那么好看,所以想到了一个骚操作... 写死宽度时是这样的: 开始 给操作列绑定宽度属性 :width=&quo ...
- element表格里面放图片_elementUI 表格中预览图片
表格中有一列显示的图片,现需要点击图片,预览该图片,使用的elementui中的previewSrcList做的图片预览, 但是测试发现,无论点击表格中的那张图片,预览的大图都是从第一张图片,开始预览 ...
- elementui树形复选框_Element-ui表格树形控件结合复选框实践
Element-ui是现在国内用得比较多的ui框架,其table组件提供了多选以及树形数据的功能,但却没有提供将两者结合的功能,我们先来看下面的图片,本文将介绍以下的功能如何实现以及其中的一些踩坑点. ...
- elementui可编辑单元格_ElementUI 表格可编辑单元格
页面 export default{ components: { EditableCell: () => import('@/components/EditableCell/EditableCe ...
- element表格取消全选_ElementUi 表格取消全选框,用文字表示
Echarts ElementUi 表格取消全选框,用文字表示 1.先看看实现的图 一. 添加添加复选框列 二.给 方法(这个方法主要就是给表格所需要的列添加类名.)具体可以看ElementUi的表格 ...
最新文章
- Map m=new HashMap()
- docker ubuntu镜像_docker使用教程
- 服务器装系统无显示屏,服务器系统安装后没有桌面
- OGG 跳过事务(转)
- 为何大公司看起来都那么糟?
- 4.Linux的目录结构
- oracle 远程连接超时问题
- 3.请求安全-- 结合使用的安全优势总结
- Unity面试题精选(5)
- Hive 与 RDBMS的区别
- visio设置网络拓扑图
- iphone163邮件服务器设置,怎样在iphone上设置网易免费企业邮箱收发邮件
- 数据库update多条数据
- 波长间隔与频率间隔换算
- 关闭Cadence Orcad Capture CIS原理图弹出startpage页面的方法
- [PAL规范]SAP HANA PAL 数据处理四分位间距检测Inter-quartile Range Test编程规范IQRTEST...
- FEDORA9安装后的配置lvlv全记录必看一览表 解决FC9安装后网络需激活
- [python之数据分析] 基础篇1- Numpy,Scipy,Matplotlib 快速入门攻略
- 水处理过滤器:多介质过滤器结构组成及技术参数
- 【ITPM】TW1:ISchool 项目前期分析说明书
热门文章
- 大工19春计算机文化基础在线测试1,大工19春《计算机文化基础》在线测试1(含答案)...
- python字符串的方法和列表的方法_Python学习笔记字符串操作之join()和split()方法,列表转字符串,字符串转列表...
- pwm控制舵机转动角度程序_Mixly 第15课 舵机的使用
- java 启动redis服务器_docker启动redis并使用java连接
- PHP伪造来源HTTP,伪造来源采集http.php
- 摄像头图像分析目标物体大小位置_摄像头的原理、组成、选型及应用
- 获取场景中指定类的实例
- rt5350 中断初始化
- ARM汇编中的ldr和adr的区别及其在uboot中相关源码的分析
- winCE下Unicode编码