antd table各种样式bug。宽度无限增加。表头和内容错位等等

table宽度无限增加

table组件在flex布局下宽度自动无限增加
当前使用的是pro-table
这时候，一般都是给class叫pro-table或者叫table的父级，一个flex：1.
而pro-table或者table类，本身100%.就可以了。
这样的思路是父级指定宽度，表格100%,同时，还必须结合定位属性来实现

<div style={{ flex: 1, position: 'relative', minWidth: '810px' }}>
   <div style={{ position: 'absolute', width: '100%' }}>
       <Table/>
   </div>
</div>

实际的项目中，还需要一些优化如下

const Container = styled.div`
flex:1;
box-sizing: border-box;
position: relative;
 padding: 20px;
 .ant-pro-table{
   width: calc(100% - 40px);
   position: absolute
 }
`

表头和内容错位

关于加上scroll之后antd的table表头与表错位?你真地得考虑一下给table的column加上列宽!!!

配置fixed固定左右侧列后，固定列的行高和表体内容行高不对齐

https://www.cnblogs.com/xcbz/p/13370420.html

cloumn渲染的操作，如何调用组件内部的方法呢？

一般来说，column的配置，都是写在函数组件外部的。
而，类似删除请求的这种操作，都是写在函数组件内部。
那么，如何，column配置中，如何去调用，组件函数内部的请求方法呢？

 column=[ {
    title: '操作',
    with:'200',
    fixed:'right',
    valueType: 'option',
    key: 'option',
    render: (text, record, _, action) => [
      // <a
      //   key="editable"
      //   onClick={() => {
      //     action?.startEditable?.(record.id);
      //   }}
      // >
      //   编辑
      // </a>,
      <a href={record.url} >立刻执行</a>,
      <a href={record.url} >停止</a>,
      <a onClick={()=>{delInfo(record.warningId,action)}} >删除</a>,
      <a href={record.url} >编辑</a>,
      <a href={record.url} >执行历史</a>,
      <a href={record.url} >血缘分析</a>
    ],
  },
];

里面的action是重点，把函数组件内部的action变量，传给了外部作用域的column