🐛 [Bug]: 高级列表调整列宽，不会根据鼠标拖动调节想要的列宽

[wujisui]

Version

15.1.2

Angular Version

15.1.2

Link to minimal reproduction

onResize({ width }: { width: string }, field: string) {
    const index = this.tableWidthConfig.findIndex((config) => {
      return config.field === field;
    });
    if (index > -1) {
      this.tableWidthConfig[index].width = width + 'px';
    }
  }

Step to reproduce

直接在 https://devui.design/admin/pages/list/advance 地址打开调节列宽就可以复现

What is expected

调整列宽的时候，调整的列宽能根据鼠标停留位置停下。

What is actually happening

无法精确调整列宽到想要的宽度。

Any additional comments (optional)

官网有个例子，能完美解决到问题

import {
  ChangeDetectorRef,
  Component,
  ElementRef,
  OnInit,
} from '@angular/core';

import { tableResizeFunc} from "ng-devui";

export class AdvanceListComponent implements OnInit {

  tableWidthConfig: TableWidthConfig[] = [
    {
      field: 'checkbox',
      width: '30px',
    },
    {
      field: 'id',
      width: '150px',
    },
    {
      field: 'title',
      width: '200px',
    },
  ];
 constructor(
    private ref: ChangeDetectorRef,
    private ele: ElementRef
  ) {
  }

onResize = tableResizeFunc(this.tableWidthConfig, this.ele);

}

但是又一个问题是，当我把 d-data-table 封装成组件的时候，tableWidthConfig 通过父组件传递过来的就无法调整列宽。

[foolmadao]

admin没更新最新的写法，按照官网demo的方式可以解决拖拽不准确的问题。
封装成组件不会影响相关逻辑，你无法调整列宽我猜测是tableWidthConfig参数在传递过程中变了地址，导致函数中的变动没反应到组件上。
如果使用column模式的话就不需要自己去执行resize逻辑了。

[wujisui]

管理员没有更新最新的写法，按照官网demo的方式可以解决拖拽不准确的问题。封装 成组件不会影响相关逻辑，你无法调整列宽我猜测是tableWidthConfig参数在传递过程中变了地址，导致函数中的振动没有反应到组件上。 如果使用column模式的话就不需要自己去执行resize逻辑了。

管理员demo的写法改成如下方法可以解决拖拽不准确的问题

onResize({width, beforeWidth}: { width: number, beforeWidth: number }, field: string): void {
    const index: number = this.tableWidthConfig.findIndex((config): boolean => config.field === field);
    if (index > -1) {
      const ratio: number = beforeWidth / parseInt(this.tableWidthConfig[index].width, 10);
      this.tableWidthConfig.forEach((t, i: number): void => {
        t.width = parseInt(t.width, 10) * ratio + 'px';
        if (index === i)  t.width = width + 'px';
      });
    }
  }

但是需要帮忙理解一下，为什么forEach里面加一行t.width = parseInt(t.width, 10) * ratio + 'px';就能解决拖拽不准的问题

[foolmadao]

管理员没有更新最新的写法，按照官网demo的方式可以解决拖拽不准确的问题。封装 成组件不会影响相关逻辑，你无法调整列宽我猜测是tableWidthConfig参数在传递过程中变了地址，导致函数中的振动没有反应到组件上。 如果使用column模式的话就不需要自己去执行resize逻辑了。

管理员demo的写法改成如下方法可以解决拖拽不准确的问题

onResize({width, beforeWidth}: { width: number, beforeWidth: number }, field: string): void {
    const index: number = this.tableWidthConfig.findIndex((config): boolean => config.field === field);
    if (index > -1) {
      const ratio: number = beforeWidth / parseInt(this.tableWidthConfig[index].width, 10);
      this.tableWidthConfig.forEach((t, i: number): void => {
        t.width = parseInt(t.width, 10) * ratio + 'px';
        if (index === i)  t.width = width + 'px';
      });
    }
  }

但是需要帮忙理解一下，为什么forEach里面加一行t.width = parseInt(t.width, 10) * ratio + 'px';就能解决拖拽不准的问题

t.width = parseInt(t.width, 10) * ratio + 'px';这个函数是把tableWidthConfig内的宽度重置为真实列宽，表格布局下，列宽不足会按比例分配，所以拖拽后宽度设置要避免做自适应分配。

另外你的写法不完善，例如拖拽后整体宽度不足的补偿没有，建议你看下组件的写法，或者直接引用相关函数使用。

[wujisui]

管理员没有更新最新的写法，按照官网demo的方式可以解决拖拽不准确的问题。封装 成组件不会影响相关逻辑，你无法调整列宽我猜测是tableWidthConfig参数在传递过程中变了地址，导致函数中的振动没有反应到组件上。 如果使用column模式的话就不需要自己去执行resize逻辑了。

管理员demo的写法改成如下方法可以解决拖拽不准确的问题

onResize({width, beforeWidth}: { width: number, beforeWidth: number }, field: string): void {
    const index: number = this.tableWidthConfig.findIndex((config): boolean => config.field === field);
    if (index > -1) {
      const ratio: number = beforeWidth / parseInt(this.tableWidthConfig[index].width, 10);
      this.tableWidthConfig.forEach((t, i: number): void => {
        t.width = parseInt(t.width, 10) * ratio + 'px';
        if (index === i)  t.width = width + 'px';
      });
    }
  }

但是需要帮忙理解一下，为什么forEach里面加一行t.width = parseInt(t.width, 10) * ratio + 'px';就能解决拖拽不准的问题

t.width = parseInt(t.width, 10) * ratio + 'px';这个函数是把tableWidthConfig内的宽度重置为真实列宽，表格布局下，列宽不足会按比例分配，所以拖拽后宽度设置要避免做自适应分配。

另外你的写法不完善，例如拖拽后整体宽度不足的补偿没有，建议你看下组件的写法，或者直接引用相关函数使用。

我看到有一个这种写法

function tableResizeFunc(tableWidthConfig, ele) {
    let _totalWidth = 0;
    let lastWidth = 0;
    let firstResize = true;
    return function onResize({ width, beforeWidth }, field) {
        const index = tableWidthConfig.findIndex((config) => {
            return config.field === field;
        });
        if (index > -1) {
            if (firstResize) {
                firstResize = false;
                const ratio = beforeWidth / parseInt(tableWidthConfig[index].width, 10);
                tableWidthConfig.forEach(t => {
                    t.width = parseInt(t.width, 10) * ratio + 'px';
                });
                _totalWidth = ele.nativeElement.querySelector('.table-wrap').offsetWidth;
                lastWidth = parseInt(tableWidthConfig.slice(-1)[0].width);
            }
            tableWidthConfig[index].width = width + 'px';
            let newWidthTotal = 0;
            tableWidthConfig.forEach(t => {
                newWidthTotal += parseInt(t.width, 10);
            });
            const lastCol = tableWidthConfig[tableWidthConfig.length - 1];
            const lastColWidth = parseInt(lastCol.width, 10);
            const changeValue = newWidthTotal - _totalWidth;
            if (changeValue < 0) {
                lastCol.width = lastColWidth + _totalWidth - newWidthTotal + 'px';
            }
            else if (lastColWidth > lastWidth) {
                const lastChange = (lastColWidth - lastWidth) > changeValue ? changeValue : (lastColWidth - lastWidth);
                lastCol.width = lastColWidth - lastChange + 'px';
            }
        }
    };
}

在我实际的项目里面反而没有前面简化写法运行那么稳定😂，好像不需要写一个宽度补偿也可以正常使用，会自动补偿。