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
🐛 [Bug]: 高级列表调整列宽,不会根据鼠标拖动调节想要的列宽 #324
Comments
admin没更新最新的写法,按照官网demo的方式可以解决拖拽不准确的问题。 |
管理员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';
}
}
};
} 在我实际的项目里面反而没有前面简化写法运行那么稳定😂,好像不需要写一个宽度补偿也可以正常使用,会自动补偿。 |
Version
15.1.2
Angular Version
15.1.2
Link to minimal reproduction
Step to reproduce
直接在 https://devui.design/admin/pages/list/advance 地址打开调节列宽就可以复现
What is expected
调整列宽的时候,调整的列宽能根据鼠标停留位置停下。
What is actually happening
无法精确调整列宽到想要的宽度。
Any additional comments (optional)
官网有个例子,能完美解决到问题
但是又一个问题是,当我把 d-data-table 封装成组件的时候,tableWidthConfig 通过父组件传递过来的就无法调整列宽。
The text was updated successfully, but these errors were encountered: