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

发布于 2022-09-13 01:00:52 字数 3002 浏览 15 评论 0


效果图可见,我左边两列是 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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文