本文主要是介绍解决antd vue 的table列表过宅内容换行和过长有空白列的问题,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
主要有两个注意点
1、columns数组中保留一个对象不设置宽度,其余都要设置宽度;
2、HTML中scroll要设置为{x: 足够长的固定宽度};
具体代码如下:
<a-tableref="table"size="middle"rowKey="rowSerial"bordered:scroll="{ x: 1600 }" // 这里的宽度要设置的足够长,长到你要求的最长宽度都不会显示空白列:columns="columns":api="tableApi":params="queryParam"showPagination="auto"/>
const columns = [{title: '序号',width: 50,align: 'center',dataIndex: 'rowSerial',},{title: '交易单号',width: 160,dataIndex: 'billNo',},{title: '交易类型',width: 150,dataIndex: 'tradeTypeName',},{title: '审批时间',dataIndex: 'completeTime', // 留一个不要设置宽度,这样就能做到自适应宽度了},{title: '操作',dataIndex: 'action',fixed: 'right',align: 'center',width: '120px',scopedSlots: { customRender: 'action' },},
]
这篇关于解决antd vue 的table列表过宅内容换行和过长有空白列的问题的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!