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

[wujisui]

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

[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';
            }
        }
    };
}

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