解决elementui表格操作列自适应列宽
网络编程 2021-07-04 14:07www.168986.cn编程入门
这篇文章主要介绍了解决elementui表格操作列自适应列宽,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们狼蚁网站SEO优化随着长沙网络推广来一起学习学习吧
业务需要前端根据用户权限动态显示对应按钮,直接把操作列的列宽写死的话,在按钮少的情况下不是那么好看,所以想到了一个骚操作...
写死宽度时是这样的
开始
给操作列绑定宽度属性
: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表格自适应列宽内容请搜索狼蚁SEO以前的文章或继续浏览狼蚁网站SEO优化的相关文章希望大家以后多多支持狼蚁SEO!
编程语言
- 如何快速学会编程 如何快速学会ug编程
- 免费学编程的app 推荐12个免费学编程的好网站
- 电脑怎么编程:电脑怎么编程网咯游戏菜单图标
- 如何写代码新手教学 如何写代码新手教学手机
- 基础编程入门教程视频 基础编程入门教程视频华
- 编程演示:编程演示浦丰投针过程
- 乐高编程加盟 乐高积木编程加盟
- 跟我学plc编程 plc编程自学入门视频教程
- ug编程成航林总 ug编程实战视频
- 孩子学编程的好处和坏处
- 初学者学编程该从哪里开始 新手学编程从哪里入
- 慢走丝编程 慢走丝编程难学吗
- 国内十强少儿编程机构 中国少儿编程机构十强有
- 成人计算机速成培训班 成人计算机速成培训班办
- 孩子学编程网上课程哪家好 儿童学编程比较好的
- 代码编程教学入门软件 代码编程教程