关于antd table组件手机端真机抖动问题?

• Z时代
• 2024-03-15
• 分类：IT

效果图可见,我左边两列是 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;

以上是 关于antd table组件手机端真机抖动问题? 的全部内容， 来源链接： utcz.com/p/935928.html