开头先附上最快速的一个方法
<ProTable
scroll={{ x: 'max-content' }}
>
由于不管Table还是ProTable的columns中都能设置width属性,但是这样就写死了,如果在后端数据过长的情况下就会显示...省略号,一开始我懒了点没有考虑太多就给他写死了宽度并且在ProTable中如果数据超过宽度会自带toolTip来进行提示,如下图:
![](https://i-blog.csdnimg.cn/blog_migrate/b806564c5ca47334324a3202d979439c.png)
最后由于我三天的不懈努力,搞懂了一个columns的计算宽度的一个组件,传入columns后会返回一个计算出那一列最长宽度的长度width属性(当然要是这样就太简单了🤭,还有下文,但是先上代码,也算是给自己长点技术,如果不想增加经验的话可以直接跳到最下方一行代码简单粗暴解决,proTable和Table皆可用):
计算长度组件并区分了文件和文字
export const getTextWidth = (str, isColumn, cols, record) => {
let formatStr = str
const isUploadFile = cols.field_typ === 'upload_file'
let width
var canvas =
getTextWidth.canvas ||
(getTextWidth.canvas = document.createElement('canvas'))
var context = canvas.getContext('2d')
context.font = 'bold 12px Segoe UI'
var metrics = context.measureText(str)
if (isUploadFile) {
width = record?.[`${cols.title}`]
? record?.[`${cols.title}`]?.length * 20
: Math.round(context.measureText(str).width) + 10
} else {
width = Math.round(metrics.width) + 20
}
console.log(str, cols.title, metrics, width, 'columns')
return width
}
下面是我用这个组件的方式:
const getColumns = async () => {
let fieldArray
//这边通过接口获取table中的数据
fieldArray = await getListService()
let detail = fieldArray?.msg?.data
console.log(fieldArray, 'columns')
//对colums进行循环并且提出key和Title
columns.forEach((cols, index) => {
const field = cols.key
const fieldAlias = cols.title
//这边由于同步异步问题第一时间获取不到detail所以加了个判断
if (detail) {
//这边进行遍历,把一列中的每一条数据放进去计算并且把title放进去计算,并进行合并出width最大的那条columns返回出来,因为会有没有内容的情况,这个情况下就会以标题为长度
const fieldArray = detail
?.map((item) => getTextWidth(item?.[field], false, cols, item))
.concat(getTextWidth(fieldAlias, true, cols))
const maxWidthField = Math.max(...fieldArray)
cols.width = maxWidthField
//这边带有width的columns已经出来的
console.log(columns, detail, maxWidthField, 'columns')
}
})
//这边带有width的columns也已经出来的
console.log(columns, 11, 'columns')
}
useEffect(() => {
getColumns()
}, [pageSize, columns])
但是你以为这样就结束了吗,并没有,因为protable的columns第一时间是获取自己原来的columns,通过函数返回的columns我试了很多方法无法覆盖,所以这个方法是行不通的,但是在Table里面是可以的(但是我没试😄,有点懒了哈)
搞到最后发现之前的太复杂了完全不需要运用组件,但是一直忽视了scroll中有max-content属性。
虽然之前也用到过,在这个项目中我一直是通过scroll={{x:999}}来设置固定的滚动条长度并且在columns每条数据中增加固定宽度width,但是这样只会增加前端的维护难度(由于一条数据太长没有完全展示出来,客户也不知道鼠标悬停能展示全部,导致了我被问话了hhhh),所以写死只能救你一时,不能一世,但是也让我学会了写东西
最后!在我通过很多办法都没有覆盖的情况下,想起来有Table/ProTable中有个属性完美解决✌:
<ProTable
scroll={{ x: 'max-content' }}
>