骚操作解决 element ui 表格操作列自适应列宽

amao

业务需要前端根据用户权限动态显示对应按钮,直接把操作列的列宽写死的话,在按钮少的情况下不是那么好看,所以想到了一个骚操作...

写死宽度时是这样的:
image


开始

给操作列绑定宽度属性

  :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);
    });

看一下效果

没有按钮时:
没有按钮时

有一个按钮:
有一个按钮

有两个按钮:
有两个按钮

有三个按钮:
有三个按钮

阅读 2.3k

不学无术的大三狗一只

25 声望
2 粉丝
0 条评论

不学无术的大三狗一只

25 声望
2 粉丝
文章目录
宣传栏