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

🐛明细表在拖拽列宽后,会导致未被拖拽列的已自定义的列宽失效 #2910

Closed
1 of 5 tasks
KzqKzq opened this issue Sep 25, 2024 · 3 comments · Fixed by #2915
Closed
1 of 5 tasks
Assignees
Labels
🐛 bug 这个是一个 bug next 2.0-next 版本的问题 released on @next

Comments

@KzqKzq
Copy link

KzqKzq commented Sep 25, 2024

🏷 Version

Package Version
@antv/s2 2.0.0-next.28
@antv/s2-react
@antv/s2-vue

Sheet Type

  • PivotSheet
  • TableSheet
  • GridAnalysisSheet
  • StrategySheet
  • EditableSheet

🖋 Description

⌨️ Code Snapshots

使用官网的例子https://s2.antv.antgroup.com/examples/layout/custom#custom-table-size 可以进行复现
精简下代码

import { S2DataConfig, S2Options, TableSheet } from '@antv/s2';

fetch('https://render.alipay.com/p/yuyan/180020010001215413/s2/basic.json')
  .then((res) => res.json())
  .then(async (data) => {
    // 详情请查看: https://s2.antv.antgroup.com/zh/docs/manual/advanced/custom/cell-size
    const container = document.getElementById('container');
    const s2DataConfig: S2DataConfig = {
      fields: {
        columns: ['type', 'province', 'city', 'price', 'cost'],
      },
      meta: [
        {
          field: 'province',
          name: '省份',
        },
        {
          field: 'city',
          name: '城市',
        },
        {
          field: 'type',
          name: '商品类别',
        },
        {
          field: 'price',
          name: '价格',
        },
        {
          field: 'cost',
          name: '成本',
        },
      ],
      data,
    };

    const s2Options: S2Options = {
      width: 600,
      height: 480,
      style: {
        // 列头宽高配置 (优先级: colCell.widthByField > colCell.width > dataCell.width)
        colCell: {
          width: 60,
        },
      },
    };

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

    await s2.render();
  });

拖动列宽后,所有字段的宽度都发生了变化
20240925145844_rec_

使用s2 v1.x 版本

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

fetch('https://render.alipay.com/p/yuyan/180020010001215413/s2/basic.json')
  .then((res) => res.json())
  .then((data) => {
    // 详情请查看: https://s2-v1.antv.antgroup.com/zh/docs/manual/advanced/custom/cell-size
    const container = document.getElementById('container');
    const s2DataConfig = {
      fields: {
        columns: ['type', 'province', 'city', '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,
      style: {
        colCfg: {
          width: 60,
        },
      },
    };
    const s2 = new TableSheet(container, s2DataConfig, s2Options);

    s2.render();
  });

拖动列宽后,只有拖动的字段宽度发生了变化
20240925150010_rec_

补充:后面查官方文档和代码,发现next版本加了一个新的配置 colResizeType

image
尝试在上面的例子里面加上该配置发现

  1. 在设置 colResizeType 为all时,是对所有单元格生效,此时所有列宽度发生变化是符合预期的
    20240925154815_rec_

  2. 在设置 colResizeType 为 current 或者 selected 时,第一次拖住列宽是对所有单元格生效,之后继续拖动才会对该列生效是不符合预期的,预期结果是第一次拖住列宽是对该列生效
    20240925154902_rec_
    20240925154943_rec_

🔗 Reproduce Link

🤔 Steps to Reproduce

😊 Expected Behavior

希望在自定义了列宽之后,拖动列宽只有对应的列发生变化

😅 Current Behavior

💻 System information

Environment Info
System
Browser
@github-actions github-actions bot added the next 2.0-next 版本的问题 label Sep 25, 2024
@lijinke666 lijinke666 self-assigned this Sep 30, 2024
@lijinke666 lijinke666 added the 🐛 bug 这个是一个 bug label Sep 30, 2024
Copy link
Contributor

你好 @KzqKzq,很抱歉给你带来了不好的体验, 我们会尽快排查问题并修复, 请关注后续发布日志.

Hello, @KzqKzq, We are so sorry for the bad experience. We will troubleshoot and fix the problem as soon as possible. Please pay attention to the follow-up change logs.

@lijinke666
Copy link
Member

lijinke666 commented Sep 30, 2024

在设置 colResizeType 为all时,是对所有单元格生效,此时所有列宽度发生变化是符合预期的

是的, 默认是对所有生效, 内部会更新 style.colCell.width

在设置 colResizeType 为 current 或者 selected 时,第一次拖住列宽是对所有单元格生效

current/selected 时, 内部会更新 style.colCell.widthByField, 这个是 bug, 不应该其他列

@lijinke666
Copy link
Member

🎉 This issue has been resolved in version @antv/s2-v2.0.0-next.29 🎉

The release is available on:

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🐛 bug 这个是一个 bug next 2.0-next 版本的问题 released on @next
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants