react ui库shineout table固定列宽问题

因业务需要在react中使用shineout中的Table组件来实现表格的效果

需求：列表前两列要固定宽度，后面的根据列宽自适应

当表格内容宽度超过父元素宽度时出现横向滚动，此时每列会按照列宽进行显示

（列宽和超过1000）

import { Table,Button } from 'shineout'
import "../../node_modules/shineout/dist/theme.antd.css"
import { useEffect, useState } from 'react'

const data = [
  {
    id: 1,
    firstName: 'Ephraim',
    lastName: 'Wisozk',
    position: 'Marketing Designer',
    start: '2012-01-29',
    time: '01:42',
    salary: 115777,
    country: 'Reunion',
    office: 'Miami',
    office5: 'Istanbul',
    height: 113.74,
  },
  {
    id: 2,
    firstName: 'Osvaldo',
    lastName: 'Beer',
    position: 'Financial Controller',
    start: '2007-09-04',
    time: '03:26',
    salary: 396093,
    country: 'Syrian Arab Republic',
    office: 'San Paulo',
    office5: 'Shenzhen',
    height: 82.13,
  },
  {
    id: 3,
    firstName: 'Dylan',
    lastName: 'Ratke',
    position: 'Development Lead',
    start: '2009-10-16',
    time: '01:45',
    salary: 236064,
    country: 'Peru',
    office: 'Boston',
    office5: 'Delhi',
    height: 179.53,
  },
  {
    id: 4,
    firstName: 'Shaniya',
    lastName: 'Jacobs',
    position: 'Developer',
    start: '2014-06-30',
    time: '02:17',
    salary: 338985,
    country: 'Peru',
    office: 'Chengdu',
    office5: 'Dallas-Fort Worth',
    height: 190.11,
  },
]



const App=()=> {
  const columns:any[] = [
    { title: 'id', render: 'id', width: 50 },
    { title: 'Name', render: d => `${d.firstName} ${d.lastName}`,width:250 },
    { title: 'Country', render: 'country',width:250 },
    { title: 'Position', render: 'position',width:200 },
    { title: 'Office', render: 'office' ,width:500},
    { title: 'Start Date', render: 'start' ,width:200},
    {
      title: 'Salary',
      render: d => `$${d.salary.toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1,')}`,width:200
    },
  ]
  const [widthTable,setWidthTable]=useState<number>(0)

  useEffect(()=>{
    let widthTable=  columns.reduce((accumulator,current)=>{
      return accumulator + current.width;
    },0)
    
    setWidthTable(widthTable)
  },[])
  
  return (
    <div style={{width:1000}}>
      <Table keygen="id" striped bordered={true}  fixed={'x'} columns={columns} data={data} width={widthTable}/>
    </div>
  )
}
export default App

当表单内容宽度小于父元素的宽度时，此时每列列宽会分别变为百分比，等比例缩放以适应父元素宽度

（列宽和小于1000）

import { Table,Button } from 'shineout'
import "../../node_modules/shineout/dist/theme.antd.css"
import { useEffect, useState } from 'react'

const data = [
  {
    id: 1,
    firstName: 'Ephraim',
    lastName: 'Wisozk',
    position: 'Marketing Designer',
    start: '2012-01-29',
    time: '01:42',
    salary: 115777,
    country: 'Reunion',
    office: 'Miami',
    office5: 'Istanbul',
    height: 113.74,
  },
  {
    id: 2,
    firstName: 'Osvaldo',
    lastName: 'Beer',
    position: 'Financial Controller',
    start: '2007-09-04',
    time: '03:26',
    salary: 396093,
    country: 'Syrian Arab Republic',
    office: 'San Paulo',
    office5: 'Shenzhen',
    height: 82.13,
  },
  {
    id: 3,
    firstName: 'Dylan',
    lastName: 'Ratke',
    position: 'Development Lead',
    start: '2009-10-16',
    time: '01:45',
    salary: 236064,
    country: 'Peru',
    office: 'Boston',
    office5: 'Delhi',
    height: 179.53,
  },
  {
    id: 4,
    firstName: 'Shaniya',
    lastName: 'Jacobs',
    position: 'Developer',
    start: '2014-06-30',
    time: '02:17',
    salary: 338985,
    country: 'Peru',
    office: 'Chengdu',
    office5: 'Dallas-Fort Worth',
    height: 190.11,
  },
]



const App=()=> {
    const columns:any[] = [
    { title: 'id', render: 'id', width: 25 },
    { title: 'Name', render: d => `${d.firstName} ${d.lastName}`,width:25 },
    { title: 'Country', render: 'country',width:25 },
    { title: 'Position', render: 'position',width:20 },
    { title: 'Office', render: 'office' ,width:50},
    { title: 'Start Date', render: 'start' ,width:20},
    {
      title: 'Salary',
      render: d => `$${d.salary.toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1,')}`,width:200
    },
  ]
  const [widthTable,setWidthTable]=useState<number>(0)

  useEffect(()=>{
    let widthTable=  columns.reduce((accumulator,current)=>{
      return accumulator + current.width;
    },0)
    
    setWidthTable(widthTable)
  },[])
  
  return (
    <div style={{width:1000}}>
      <Table keygen="id" striped bordered={true}  fixed={'x'} columns={columns} data={data} width={widthTable}/>
    </div>
  )
}
export default App

此时前两列无法固定宽度

如果根据需求想要固定列宽，可以在后面几列自适应完成之后添加上前几个固定值的列就可以保持前几列宽度固定不变的效果

useEffect(()=>{
    let firstArr=  testColumns.slice(1,3)
    let lastArr=  testColumns.slice(3)
   let firstWidthTable= firstArr.reduce((accumulator,current)=>{
      return accumulator + current.width;
   },0)
   let lastWidthTable =lastArr.reduce((accumulator,current)=>{
      return accumulator + current.width;
    },0)
    const widthTable=firstWidthTable+lastWidthTable
    if( widthTable<1000){
      setWidthTable(1000);
      lastArr?.forEach((item: { width: number }) => {
         item.width=1000*(item.width/lastWidthTable);
      });
    }else{
      setWidthTable(widthTable);
    }
    const newColumns=[...firstArr,...lastArr]
    setColumns(newColumns)
  },[])