el-table 列宽自适应,elementui表格列宽可拖动

　　本文主要介绍如何解决elementui表格操作列的自适应列宽问题。通过示例代码进行了非常详细的介绍，对大家的学习或工作有一定的参考价值。有需要的朋友下面跟边肖学习。

　　如果业务前端需要根据用户权限动态显示相应的按钮，直接写下操作栏的列宽，按钮少的时候就不那么好看了，于是我想到了一个骚操作。

　　写死宽的时候是这样的：

开始

　　将宽度属性绑定到操作列。

　　:width=actionColWidth 80？ 80 : actionColWidth

　　使用div来覆盖操作列中的所有按钮。

　　class=action-col

　　div class=action-col

　　el按钮/el按钮

　　.

　　/div

　　设置数据中列宽的初始值。

　　Colwidth: 80，//表格操作列的宽度

　　在表格数据请求回来赋值给表格之后，执行计算宽度的操作

　　这里我们用jq获取表格第一行的所有按钮，然后把每个按钮的宽度加起来，就是操作列的宽度。

　　不用jq可以用原生js。

　　如果表格中每一行的操作按钮都不一样，那么就得到每一行操作按钮的总宽度，然后取最大的一个。这里没有这个需求，我就不写了。

　　getClerkList(参数)。然后((res)={

　　this . table data=RES . rows；

　　这个。$nextTick(()={

　　//多给表格操作的列宽25px，否则显示不完整。

　　假设宽度=25；

　　//使用jq遍历表格第一行操作列的每个按钮。

　　$(.动作-列)。等式(0)。孩子(’。El-button’)。each(function () {

　　//累加每个按钮的宽度

　　宽度=$(这个)。outer width(true)；

　　});

　　//将计算出的总宽度赋给运算列宽。

　　this.actionColWidth=width

　　});

　　})。catch((err)={

　　console.error(错误)；

　　});

看一下效果

　　没有按钮时：

　　有一个按钮：

　　有两个按钮：

　　有三个按钮：

　　关于解决elementui表的自适应列宽的文章到此结束。有关elementui表的自适应列宽的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。