Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

1.x明细表拖拽行高受rowCell的padding影响 #2905

Open
1 of 5 tasks
li1615882553 opened this issue Sep 20, 2024 · 2 comments
Open
1 of 5 tasks

1.x明细表拖拽行高受rowCell的padding影响 #2905

li1615882553 opened this issue Sep 20, 2024 · 2 comments
Labels
💤 inactive 不活跃的 Issue 或 PR, 30天没有回复

Comments

@li1615882553
Copy link

🏷 Version

Package Version
@antv/s2 1.55.8
@antv/s2-react -
@antv/s2-vue -

Sheet Type

  • PivotSheet
  • TableSheet
  • GridAnalysisSheet
  • StrategySheet
  • EditableSheet

🖋 Description

明细表当theme设置了rowCell的padding样式之后,每次拖拽行高,都会自动减去padding中top和bottom的高度,具体表现如下:

Sep-20-2024.15-16-57.mp4

⌨️ Code Snapshots

在链接中使用以下代码即可复现:https://s2-v1.antv.antgroup.com/examples/basic/table/#table

import { TableSheet } from '@antv/s2';

fetch('https://assets.antv.antgroup.com/s2/basic-table-mode.json')
  .then((res) => res.json())
  .then((data) => {
    const container = document.getElementById('container');
    const s2DataConfig = {
      fields: {
        columns: ['province', 'city', 'type', 'price', 'cost'],
      },
      meta: [
        {
          field: 'province',
          name: '省份',
        },
        {
          field: 'city',
          name: '城市',
        },
        {
          field: 'type',
          name: '商品类别',
        },
        {
          field: 'price',
          name: '价格',
        },
        {
          field: 'cost',
          name: '成本',
        },
      ],
      data,
    };

    const s2Options = {
      width: 600,
      height: 480,
      showSeriesNumber: true,
    };

    const s2 = new TableSheet(container, s2DataConfig, s2Options);

    // 设置了rowCell.cell.padding.top或rowCell.cell.padding.bottom即可复现
    s2.setThemeCfg({
      theme: {
        rowCell: {
          cell: {
            padding: {
              top: 8,
              right: 8,
              bottom: 8,
              left: 8
            }
          }
        }
      }
    })

    s2.render();
  });
@li1615882553
Copy link
Author

感觉是这里的问题,在拖拽结束后,没有区分明细表还是透视表,直接将cell高度减去了padding。

const { padding: rowCellPadding } = this.spreadsheet.theme.rowCell.cell;
const resizeInfo = this.getResizeInfo();
const { displayHeight } = this.getDisAllowResizeInfo();
const height = displayHeight - rowCellPadding.top - rowCellPadding.bottom;

然后在明细表示使用时,获取cell高度,使用的就是拖拽更新后的高度,导致每次都会减去paddingTop和paddingBottom的高度
protected getDefaultCellHeight() {
const { cellCfg } = this.cfg;
return cellCfg?.height ?? 0;
}

@lijinke666
Copy link
Member

可以尝试来个 PR.

@github-actions github-actions bot added the 💤 inactive 不活跃的 Issue 或 PR, 30天没有回复 label Oct 31, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
💤 inactive 不活跃的 Issue 或 PR, 30天没有回复
Projects
None yet
Development

No branches or pull requests

2 participants