关于antd table组件手机端真机抖动问题?
效果图可见,我左边两列是 fixed 的.往拖动右边列的时候,左边的数据会抖动弹出来,
四个边界均存在此问题.求大佬出个方案~ 本人是 IOS 设备
附上我的代码
import React, { Component } from 'react';
import { Table, Divider, Tag } from 'antd';
class CustomComp extends Component {
state = { y: 0, FIRST_ROW: null, scrollTop: 0 };
componentDidMount() {
}
render() {
const columns = [
{
title: '人员',
dataIndex: 'name',
key: 'name',
width: 100,
fixed: 'left',
className: 'renyuan blue',
},
{
title: '部门',
dataIndex: 'name',
key: 'name',
width: 100,
fixed: 'left',
className: 'bumen blue',
},
{
title: '累计完成值',
className: 'leiji yellow',
width: 270,
children: [
{
className: 'leiji taoshu yellow',
title: '套数',
dataIndex: 'age',
key: 'age',
width: 90,
},
{
className: 'leiji hetong yellow',
title: '合同额',
dataIndex: 'age',
key: 'age',
width: 90,
},
{
className: 'leiji huikuan yellow',
title: '回款额',
dataIndex: 'age',
key: 'age',
},
],
},
{
title: '本周新增',
className: 'benzhou blue',
width: 270,
children: [
{
title: '套数',
dataIndex: 'age',
className: 'blue',
key: 'age',
width: 90,
},
{
title: '合同额',
dataIndex: 'age',
className: 'blue',
key: 'age',
width: 90,
},
{
title: '回款额',
dataIndex: 'age',
className: 'blue',
key: 'age',
},
],
},
{
title: '综合目标完成率',
className: 'zonghe',
dataIndex: 'gender',
width: 150,
key: 'gender',
className: 'yellow',
},
];
const data = [];
const zbx = [
'销售一部',
'销售二部',
'销售三部',
'销售四部',
'新业务拓展部',
'宁波分公司',
'绍兴子公司',
'嘉兴子公司',
'苏州子公司',
'杭州子公司',
'供应链一体化',
'云业务',
];
for (let i = 0; i < 12; i++) {
data.push({
key: i,
name: zbx[i],
age: i + 1,
street: 'Lake Park',
building: 'C',
number: 2035,
companyAddress: 'Lake Street 42',
companyName: 'SoftLake Co',
gender: 'M',
});
}
return (
<div>
<Table
className="my-table"
size="small"
columns={columns}
dataSource={data}
bordered
size="middle"
pagination={false}
scroll={{ x: 'calc(700px + 50%)',y:`250px` }}
/>
</div>
);
}
}
export default CustomComp;
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论