vue3 vxe-grid 列自动扩展的问题,设置了width,然后maxWidth设置将不会起作用。

1、先上个图,我们先看一下官网说明:

这里说明一点:

1)如果我们全部设置了width,每一列都有width,那么系统会自动按照width来布局,也就是说你设置多少就是多少,屏越大,就越不会铺满。

2)如果我们设置了min-width及max-width,那么系统会根据这个来处理。

3)如果我们设置了%,百分比的话,那会根据百分比来布局。

这里让我们感觉到一点,百分比也是比较管用的。

2、那我们现在布局就有好几种方式:

 

1)我们可以借助min-width,max-width让最后一列去根据宽度的大小来进行一个缩放。

2)也可以将前面几列固定的和为一个百分比,最后一列将剩下的百分比来布局。

3)是不是可以将前面几列用一个固定的width来,然后最好一列用一个百分比来布局。(暂未测试)

3、优先级的问题:

width如果设置了一个值,那么vxe-grid就不会再去考虑min-width与max-width二个者的布局条件了。

4、动态生成列:

我们如果数据库中有一系统列的信息,包括标题title,字段名fieldname,对齐方式align,排序sortable,是否显示等等。

let fields = {
              field: item.fieldname,
              title: item.fielddesc,
              width: item.fieldname == '最后一列的名称' ? undefined : item.fieldwidth,
              showOverflow: 'tooltip',
              align: item.fieldalign,
              sortable: Boolean(item.columnsorted),
              minWidth: item.fieldname == '最后一列的名称' ? item.fieldwidth : undefined,
              maxWidth: item.fieldname == '最后一列的名称' ? 500 : undefined,
            };
// ...slots等等。

gridOptions.columns?.push(fields);

最后生效:

const $table = tableRef.value;
    if ($table) {
      $table.refreshColumn();
    }

最后我们发现,动态生成的方法也是可以自动扩展最后一列的宽度的。

当然,百分比的方式也可以作一些尝试。

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值