RTL布局下Bootstrap Table拖拽表头调整列宽功能异常如何解决

问题原因 #

你使用的jquery-resizable-columns拖拽插件默认仅适配LTR（从左到右）布局，RTL场景下的鼠标偏移量计算、拖拽手柄位置都没有做适配，导致拖拽一列时偏移量被错误计算到相邻列上，出现同步变动的问题。

修复方案 #

1. 新增RTL适配样式 #

table[dir="rtl"] .rc-handle-container {
  left: 0 !important;
  right: auto !important;
}
table[dir="rtl"] .rc-handle {
  margin-left: -3px !important;
  margin-right: 0 !important;
}

2. 覆盖拖拽计算逻辑 #

重写resizableColumns的resize事件处理，对RTL场景的偏移量做反转：

$(document).ready(function () {
  // 判断表格是否为RTL布局
  const isRtl = $('table').attr('dir') === 'rtl';
  
  // 重写偏移量计算逻辑
  $.fn.resizableColumns.Constructor.prototype.onResize = function (e) {
    var that = this,
        $table = this.$table,
        startX = e.pageX,
        startWidth = this.$currentTh.width(),
        nextStartWidth = this.$nextTh.width();

    $(document).on('mousemove.rc', function (e) {
      var diffX = e.pageX - startX;
      // RTL下偏移量反转
      if (isRtl) {
        diffX = -diffX;
      }
      var newWidth = startWidth + diffX;
      var nextNewWidth = nextStartWidth - diffX;

      // 最小宽度限制，可根据需求自行调整
      if (newWidth < 30 || nextNewWidth < 30) return;

      that.$currentTh.width(newWidth);
      that.$nextTh.width(nextNewWidth);
      $table.trigger('column:resize', [that.$currentTh, newWidth, that.$nextTh, nextNewWidth]);
    });

    $(document).on('mouseup.rc', function () {
      $(document).off('mousemove.rc mouseup.rc');
      $table.trigger('column:resize:stop', [that.$currentTh, that.$nextTh]);
    });

    e.preventDefault();
  };

  // 初始化拖拽
  $('table').resizableColumns();
});

3. 修正HTML冗余配置 #

原代码中同时使用了bootstrap-table的data-resizable="true"属性和手动调用resizableColumns()，二者会产生冲突，删除table标签上的data-resizable="true"属性即可，最终table标签示例：

<table dir="rtl" data-toggle="table">
  <thead>
    <tr>
      <th> th1 </th>
      <th> th2 </th>
      <th> th3 </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td> td1 </td>
      <td> td2 </td>
      <td> td3 </td>
    </tr>
    <tr>
      <td> td1 </td>
      <td> td2 </td>
      <td> td3 </td>
    </tr> 
    <tr>
      <td> td1 </td>
      <td> td2 </td>
      <td> td3 </td>
    </tr>
  </tbody>
<table>

内容的提问来源于stack exchange，提问作者Saleh