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();
}
最后我们发现,动态生成的方法也是可以自动扩展最后一列的宽度的。
当然,百分比的方式也可以作一些尝试。