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

[KzqKzq]

🏷 Version

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

Sheet Type

• [ ] PivotSheet
• [x] 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();
  });

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

使用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();
  });

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

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

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

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

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

🔗 Reproduce Link

🤔 Steps to Reproduce

😊 Expected Behavior

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

😅 Current Behavior

💻 System information

Environment	Info
System
Browser

[github-actions[bot]]

你好 @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]

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

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

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

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

[lijinke666]

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

The release is available on:

• npm package (@next dist-tag)
• GitHub release

Your semantic-release bot :package::rocket: