表格列宽度拖拽bug?

[DongFang-Jun]

bug 描述

官网包括自己项目中使用表格，列宽度手势拖拽有问题。详细表现麻烦看下复现视频。

你预期的样子是？

根据手势实现自定义列宽度

系统和浏览器及版本号

mac版本15.2；谷歌版本 ：131.0.6778.265（正式版本） (x86_64)

wangEditor-next 版本

"@wangeditor-next/editor": "^5.6.5",
"@wangeditor-next/editor-for-vue": "^5.1.14",

demo 能否复现该 bug ？

能

在线 demo

官网demo可以复现

[

2025-01-16.14.41.43.mov

](url)

[DongFang-Jun]

<h2 style="text-align: center;"><strong>中胚层治疗知情同意书</strong></h2><table style="width: auto;table-layout: fixed;height:991"><colgroup contentEditable="false"><col width=142></col><col width=75></col><col width=76></col><col width=423></col></colgroup><tbody><tr><td colspan="1" rowspan="1" width="177" style="border-width: 1px; border-style: solid; border-color: rgb(204, 204, 204);"><p style="text-align: justify;"><span style="font-size: 10.5pt; font-family: 宋体;"><strong>就医者姓名：</strong></span></p></td><td colspan="1" rowspan="1" width="98" style="border-width: 1px; border-style: solid; border-color: rgb(204, 204, 204);"><p style="text-align: justify;"><span style="font-size: 10.5pt; font-family: 宋体;"><strong>性别：</strong></span></p></td><td colspan="1" rowspan="1" width="97" style="border-width: 1px; border-style: solid; border-color: rgb(204, 204, 204);"><p style="text-align: justify;"><span style="font-size: 10.5pt; font-family: 宋体;"><strong>年龄：</strong></span></p></td><td colspan="1" rowspan="1" width="219" style="border-width: 1px; border-style: solid; border-color: rgb(204, 204, 204);"><p style="text-align: justify;"><span style="font-size: 10.5pt; font-family: 宋体;"><strong>病历号：</strong></span></p></td></tr><tr><td colspan="4" rowspan="1" width="593" style="border-width: 1px; border-style: solid; border-color: rgb(204, 204, 204);"><p><span style="font-size: 10.5pt; font-family: 宋体;"><strong>治疗部位：</strong></span></p></td></tr><tr><td colspan="4" rowspan="1" width="593" style="border-width: 1px; border-style: solid; border-color: rgb(204, 204, 204);"><p style="text-align: left;"><span style="font-size: 10pt; font-family: 微软雅黑;">一、 中胚层治疗原理（水光、微针）</span></p><p style="text-align: left;"><span style="font-size: 10pt; font-family: 微软雅黑;">利用物理的手段打开皮肤深层通道，注入对皮肤需要的营养物质。同时促进皮肤组织修复和代谢。</span></p><p style="text-align: left;"><span style="font-size: 10pt; font-family: 微软雅黑;">二、 水光功效</span></p><p style="text-align: left;"><span style="font-size: 10pt; font-family: 微软雅黑;">1、有效为肌肤深层储水补水存水，使面部肌肤水分充足。</span></p><p style="text-align: left;"><span style="font-size: 10pt; font-family: 微软雅黑;">2、根据不同的水光成分，起到抑制黑色素生成，还原氧化，促进胶原蛋白新生，清理自由基，修复和筑建受损的皮肤屏障，抑菌消炎维持皮肤组织的健康平衡，增强促进细胞活性等作用。</span></p><p style="text-align: left;"><span style="font-size: 10pt; font-family: 微软雅黑;">三、 注意事项</span></p><p style="text-align: left;"><span style="font-size: 10pt; font-family: 微软雅黑;">1、治疗部位16~24小时内不沾水，24</span>小时后~7天内可用纯净水（凉白开）或蒸馏水洗脸；</p><p style="text-align: left;"><span style="font-size: 10pt; font-family: 微软雅黑;">2、前三天不用洗面奶；术后不要用手抓挠治疗部位，注意面部卫生；</span></p><p style="text-align: left;"><span style="font-size: 10pt; font-family: 微软雅黑;">3、前三天不化妆，不涂防晒霜，只涂保湿为主的刺激性不强的霜/乳；不能使用功效性产品，如祛痘美白等；</span></p><p style="text-align: left;"><span style="font-size: 10pt; font-family: 微软雅黑;">4、术后建议使用消炎凉血喷雾（如山茶花喷雾、茶树喷雾等），含III型胶原蛋白、寡肽、多肽等修复成分的械字号医用水乳等进行修复；</span></p><p style="text-align: left;"><span style="font-size: 10pt; font-family: 微软雅黑;">5、术后前一周内大量补水，建议每天1~2片医用修复面膜，如果普通面膜只用保湿面膜，且3天后方可使用；</span></p><p style="text-align: left;"><span style="font-size: 10pt; font-family: 微软雅黑;">6、术后第2~3天皮肤会有些红，小瘀点，起小白头粉刺，稍肿、紧绷、刺痛，都是正常现象。瘀点3~7天会消失。这个回复时间因人而异；</span></p><p style="text-align: left;">术后3~5天，皮肤会偏干，甚至偏黄，都是恢复期正常现象。（推荐微针前进行水光针注射，效果加倍）</p><p style="text-align: left;"><span style="font-size: 10pt; font-family: 微软雅黑;">7、</span>根据导入的药物不同，起效时间也不一样，一般胶原微针的效果一周左右出现，祛痘微针的效果一周以上出现，美白淡斑效果10天以上出现；</p><p style="text-align: left;"><span style="font-size: 10pt; font-family: 微软雅黑;">8、术后一周内，避免吸烟、喝酒、熬夜、吃辛辣刺激 牛羊肉 海鲜等，少吃或不吃光感性食物；注意5~7天不要剧烈运动，汗蒸、游泳、高温瑜伽等；避免服用抗凝药物；</span></p><p style="text-align: left;"><span style="font-size: 10pt; font-family: 微软雅黑;">9、术后半个月内注意防晒。</span></p><p style="text-align: left;"><span style="font-size: 10pt; font-family: 微软雅黑;">四、院方承诺</span></p><p><span style="font-size: 10pt; font-family: 微软雅黑;">院方承诺尊重顾客的隐私权，未经本人或监护人同意，不向第三方披露病例资料。</span></p></td></tr><tr><td colspan="4" rowspan="1" width="593" style="border-width: 1px; border-style: solid; border-color: rgb(204, 204, 204);"><p style="text-indent: 24pt; text-align: right;"><span style="font-size: 12pt; font-family: 微软雅黑;"><strong>就医者签名： &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</strong></span></p><p style="text-indent: 24pt; text-align: right;"><strong> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 签字时间：</strong><span style="font-size: 12pt; font-family: 微软雅黑;"><u><strong> &nbsp; &nbsp; &nbsp;</strong></u></span><span style="font-size: 12pt; font-family: 微软雅黑;"><strong>年</strong></span><span style="font-size: 12pt; font-family: 微软雅黑;"><u><strong> &nbsp; &nbsp; &nbsp;</strong></u></span><span style="font-size: 12pt; font-family: 微软雅黑;"><strong>月</strong></span><span style="font-size: 12pt; font-family: 微软雅黑;"><u><strong> &nbsp; &nbsp; </strong></u></span><span style="font-size: 12pt; font-family: 微软雅黑;"><strong>日</strong></span></p></td></tr></tbody></table><p><br></p>

[DongFang-Jun]

<h2 style="text-align: center;">\<strong\>中胚层治疗知情同意书\</strong\></h2><table style="width: auto;table-layout: fixed;height:991"><colgroup contentEditable="false"><col width=142></col><col width=75></col><col width=76></col><col width=423></col></colgroup><tbody><tr><td colspan="1" rowspan="1" width="177" style="border-width: 1px; border-style: solid; border-color: rgb(204, 204, 204);"><p style="text-align: justify;"><span style="font-size: 10.5pt; font-family: 宋体;">\<strong\>就医者姓名：\</strong\></span></p></td><td colspan="1" rowspan="1" width="98" style="border-width: 1px; border-style: solid; border-color: rgb(204, 204, 204);"><p style="text-align: justify;"><span style="font-size: 10.5pt; font-family: 宋体;">\<strong\>性别：\</strong\></span></p></td><td colspan="1" rowspan="1" width="97" style="border-width: 1px; border-style: solid; border-color: rgb(204, 204, 204);"><p style="text-align: justify;"><span style="font-size: 10.5pt; font-family: 宋体;">\<strong\>年龄：\</strong\></span></p></td><td colspan="1" rowspan="1" width="219" style="border-width: 1px; border-style: solid; border-color: rgb(204, 204, 204);"><p style="text-align: justify;"><span style="font-size: 10.5pt; font-family: 宋体;">\<strong\>病历号：\</strong\></span></p></td></tr><tr><td colspan="4" rowspan="1" width="593" style="border-width: 1px; border-style: solid; border-color: rgb(204, 204, 204);"><p><span style="font-size: 10.5pt; font-family: 宋体;">\<strong\>治疗部位：\</strong\></span></p></td></tr><tr><td colspan="4" rowspan="1" width="593" style="border-width: 1px; border-style: solid; border-color: rgb(204, 204, 204);"><p style="text-align: left;"><span style="font-size: 10pt; font-family: 微软雅黑;">一、 中胚层治疗原理（水光、微针）</span></p><p style="text-align: left;"><span style="font-size: 10pt; font-family: 微软雅黑;">利用物理的手段打开皮肤深层通道，注入对皮肤需要的营养物质。同时促进皮肤组织修复和代谢。</span></p><p style="text-align: left;"><span style="font-size: 10pt; font-family: 微软雅黑;">二、 水光功效</span></p><p style="text-align: left;"><span style="font-size: 10pt; font-family: 微软雅黑;">1、有效为肌肤深层储水补水存水，使面部肌肤水分充足。</span></p><p style="text-align: left;"><span style="font-size: 10pt; font-family: 微软雅黑;">2、根据不同的水光成分，起到抑制黑色素生成，还原氧化，促进胶原蛋白新生，清理自由基，修复和筑建受损的皮肤屏障，抑菌消炎维持皮肤组织的健康平衡，增强促进细胞活性等作用。</span></p><p style="text-align: left;"><span style="font-size: 10pt; font-family: 微软雅黑;">三、 注意事项</span></p><p style="text-align: left;"><span style="font-size: 10pt; font-family: 微软雅黑;">1、治疗部位16~24小时内不沾水，24</span>小时后~7天内可用纯净水（凉白开）或蒸馏水洗脸；</p><p style="text-align: left;"><span style="font-size: 10pt; font-family: 微软雅黑;">2、前三天不用洗面奶；术后不要用手抓挠治疗部位，注意面部卫生；</span></p><p style="text-align: left;"><span style="font-size: 10pt; font-family: 微软雅黑;">3、前三天不化妆，不涂防晒霜，只涂保湿为主的刺激性不强的霜/乳；不能使用功效性产品，如祛痘美白等；</span></p><p style="text-align: left;"><span style="font-size: 10pt; font-family: 微软雅黑;">4、术后建议使用消炎凉血喷雾（如山茶花喷雾、茶树喷雾等），含III型胶原蛋白、寡肽、多肽等修复成分的械字号医用水乳等进行修复；</span></p><p style="text-align: left;"><span style="font-size: 10pt; font-family: 微软雅黑;">5、术后前一周内大量补水，建议每天1~2片医用修复面膜，如果普通面膜只用保湿面膜，且3天后方可使用；</span></p><p style="text-align: left;"><span style="font-size: 10pt; font-family: 微软雅黑;">6、术后第2~3天皮肤会有些红，小瘀点，起小白头粉刺，稍肿、紧绷、刺痛，都是正常现象。瘀点3~7天会消失。这个回复时间因人而异；</span></p><p style="text-align: left;">术后3~5天，皮肤会偏干，甚至偏黄，都是恢复期正常现象。（推荐微针前进行水光针注射，效果加倍）</p><p style="text-align: left;"><span style="font-size: 10pt; font-family: 微软雅黑;">7、</span>根据导入的药物不同，起效时间也不一样，一般胶原微针的效果一周左右出现，祛痘微针的效果一周以上出现，美白淡斑效果10天以上出现；</p><p style="text-align: left;"><span style="font-size: 10pt; font-family: 微软雅黑;">8、术后一周内，避免吸烟、喝酒、熬夜、吃辛辣刺激 牛羊肉 海鲜等，少吃或不吃光感性食物；注意5~7天不要剧烈运动，汗蒸、游泳、高温瑜伽等；避免服用抗凝药物；</span></p><p style="text-align: left;"><span style="font-size: 10pt; font-family: 微软雅黑;">9、术后半个月内注意防晒。</span></p><p style="text-align: left;"><span style="font-size: 10pt; font-family: 微软雅黑;">四、院方承诺</span></p><p><span style="font-size: 10pt; font-family: 微软雅黑;">院方承诺尊重顾客的隐私权，未经本人或监护人同意，不向第三方披露病例资料。</span></p></td></tr><tr><td colspan="4" rowspan="1" width="593" style="border-width: 1px; border-style: solid; border-color: rgb(204, 204, 204);"><p style="text-indent: 24pt; text-align: right;"><span style="font-size: 12pt; font-family: 微软雅黑;">\<strong\>就医者签名： &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;\</strong\></span></p><p style="text-indent: 24pt; text-align: right;">\<strong\> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 签字时间：\</strong\><span style="font-size: 12pt; font-family: 微软雅黑;"><u>\<strong\> &nbsp; &nbsp; &nbsp;\</strong\></u></span><span style="font-size: 12pt; font-family: 微软雅黑;">\<strong\>年\</strong\></span><span style="font-size: 12pt; font-family: 微软雅黑;"><u>\<strong\> &nbsp; &nbsp; &nbsp;\</strong\></u></span><span style="font-size: 12pt; font-family: 微软雅黑;">\<strong\>月\</strong\></span><span style="font-size: 12pt; font-family: 微软雅黑;"><u>\<strong\> &nbsp; &nbsp; \</strong\></u></span><span style="font-size: 12pt; font-family: 微软雅黑;">\<strong\>日\</strong\></span></p></td></tr></tbody></table><p><br></p>

这是富文本导出来的源数据

[cycleccc]

和数据没关系，是拖拽的问题，视频里可以发现两个问题，拖拽太快导致整个拖拽失效和拖拽超宽失效，这是监听宽度不溢出的措施，拖拽表格相关的需要细节优化一下。