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
分类:
91vue.js
, 92react.js
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· Manus爆火,是硬核还是营销?
· 终于写完轮子一部分:tcp代理 了,记录一下
· 别再用vector<bool>了!Google高级工程师:这可能是STL最大的设计失误
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· 单元测试从入门到精通
2022-01-11 element 验证相关