React中ProTable/Table每一列内容自适应全部展开

KisJ

已于 2023-03-27 17:23:58 修改

阅读量2.6k

点赞数 11

分类专栏： React-AntdPro 文章标签： react.js 前端

于 2023-02-24 15:03:27 首次发布

本文链接：https://blog.csdn.net/KisJLLLLLL/article/details/129200389

版权

React-AntdPro 专栏收录该内容

1 篇文章

订阅专栏

开头先附上最快速的一个方法

<ProTable
 scroll={{ x: 'max-content' }}
>

由于不管Table还是ProTable的columns中都能设置width属性，但是这样就写死了，如果在后端数据过长的情况下就会显示...省略号，一开始我懒了点没有考虑太多就给他写死了宽度并且在ProTable中如果数据超过宽度会自带toolTip来进行提示，如下图：

最后由于我三天的不懈努力，搞懂了一个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' }}
>