2000字范文,分享全网优秀范文,学习好帮手!
2000字范文 > elementui表格宽度适应内容_解决elementui表格操作列自适应列宽

elementui表格宽度适应内容_解决elementui表格操作列自适应列宽

时间:2019-10-26 07:40:23

相关推荐

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)

.chi

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。