elementui表格宽度适应内容_解决elementui表格操作列自适应列宽代码示例
本篇文章小编给大家分享一下解决elementui表格操作列自适应列宽代码示例,文章代码介绍的很详细,小编觉得挺不错的,现在分享给大家供大家参考,有需要的小伙伴们可以来看看。
写死宽度时是这样的:
开始
给操作列绑定宽度属性
:width="actionColWidth < 80 ? 80 : 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
elementui表格宽度适应内容_解决elementui表格操作列自适应列宽代码示例相关推荐
- elementui表格宽度适应内容_解决elementui表格操作列自适应列宽
业务需要前端根据用户权限动态显示对应按钮,直接把操作列的列宽写死的话,在按钮少的情况下不是那么好看,所以想到了一个骚操作... 写死宽度时是这样的: 开始 给操作列绑定宽度属性 :width=&quo ...
- elementui 表格表头换行_解决element-ui表格表头内容太长时的换行问题
在用vue+element-ui做一个后台管理系统时,遇到这样的问题, 如图: 使用el-table做一个表格,当表头内容过长时会换行,在不设置的宽度的时候每一列的宽度是等比例分配的,虽然elemen ...
- elementui表格宽度适应内容_elementui表格中的列怎么实现自适应列宽
elementui表格中的列怎么实现自适应列宽 发布时间:2020-12-28 14:58:04 来源:亿速云 阅读:53 作者:Leah 这期内容当中小编将会给大家带来有关elementui表格中的 ...
- el select 清空_解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题
这是一个项目中常见的需求,el-select 为下拉多选,默认值不可删除,或者指定值不可删除. 实现效果: el-select 如下源码中 tag closable 属性为 el-select 的 d ...
- vue计算多列和_解决vue 表格table列求和的问题
最近在给朋友做一个项目,因为是B端,所以少不了表格. 本身就用了element-ui,但是订单管理有个需求使用element-ui table组件实现不了,只能退而求其之用了原生的table,功能是几 ...
- layui的轮播图片自适应大小_解决Layui 表格自适应高度的问题
解决Layui 表格自适应高度的问题 鄙人在写一个项目,发现成功将数据在页面显示后, 高度没有自适应,而是将一些按钮遮挡了,不断的调试和网上寻找解决办法,发现没有效果,最后添加了一句css .layu ...
- python表格绘制斜线表头_在table表格中实现圆角效果
在table中设置border-radius发现不起作用,网上查找了一番,原因是border-collapse:collapse和border-radius不兼容. 设计图效果 代码实现效果: #ta ...
- el-table 树形表格 自定义展开图标_[shell脚本]表格数据在终端可视化输出
最终效果 1. 自定义表格样式 2. 自定义主题颜色 支持三系普通颜色 支持16色彩虹色 支持单颜色 回顾一下shell语法 1. shell传递参数 我们可以在执行shell脚本时实时传递参数从而指 ...
- python spyder跑出的数据部分有些不变是怎么回事_解决Python spyder显示不全df列和行的问题...
python中有的df列比较长head的时候会出现省略号,现在数据分析常用的就是基于anaconda的notebook和sypder,在spyder下head的时候就会比较明显的遇到显示不全.这时候我 ...
最新文章
- Scrapy学习篇(九)之文件与图片下载
- uml 继承_UML 完全解析和总结
- JWT【JSON Web Token】 简述
- 阿卡接口_阿卡vs风暴
- 烂代码解决方案:Java设计模式的魅力
- 小米11真机现身:稳了!
- 【对讲机的那点事】对讲机天馈系统关键元器件之功分器
- 全局Angular CLI版本大于本地版本
- 【FFMEPG】windows下编译ffmpeg2.5——使用VS2013,ARMLINUX,ANDORID编译ffmpeg
- tecplot 360 2018 R1 R2安装教程及软件百度云
- 海康威视工业相机驱动下载地址
- 全屏 虚拟机_虚拟机的导入
- 知识图谱从入门到应用——知识图谱推理:基础知识
- Thinkphp3.2(tp3.2) sql语句表达式查询字符列表【eq,neq,gt,egt,lt,elt,in,between,like,exp】
- HttpClient发送POST和GET请求
- Ubuntu中Python无法显示图片
- This old-style function definition is not preceded by a prototype
- thinksnsv4 php7,社交系统ThinkSNS+安装部署演示
- 【专家访谈】测试专家 陈林钧 访谈问题收集中
- JSON以及Ajax