el-table 拖拽列宽出现空白列问题

几种场景

• 所有列均不设置宽度，（初次加载和拖拽时）列宽自适应，不会出现空白（列）
• 部分列设置宽度，（初次加载和拖拽时）列宽自适应，不会出现空白（列）
• 所有列都设置宽度，（初次加载和拖拽时）列宽总和没有超出容器宽度时，会出现空白（列）

解决方式

简单处理

• 至少一列设置min-width
• 如果包含固定列，直接设置固定列min-width即可（当前面列宽较小时，固定列会充满剩余宽度，排版可能不好看）

修改源码

实际开发中我们使用的是avue，通过json动态生成列。最初我们提出了两种修改方法：

• 固定操作列宽度改为min-width，但在某些字段较少的列表中表现较差，固定操作列过长（被产品pass）
  
• 保证左右两侧固定列宽度不变，中间列宽度自适应，即在配置列的时候保证至少有一列不要设置width（由于一些现实问题，开发团队较多且有外包参与，很难执行，pass）

最终我们决定修改element-ui源码，实现思路：

• 固定列不允许拖拽宽度

  // packages/table/src/store/index.js
  insertColumn(states, column, index, parent) {
  	//...
      // -46行-如果是固定列，则不允许拖拽宽度。
      if (column.fixed) {
        column.resizable = false;
      }
      //...
  }
  

• 非固定列的最后一列宽度自适应（不管有没有配置width）

  // packages/table/src/store/watch.js
  updateColumns() {
    //...
    // -106行-如果右侧存在固定列，则中间最后一列不允许拖拽且宽度要自适应(如果最后一列非数据展示列，则倒数第二列宽度自适应)
    // 在avue中，列表会默认插入一个宽度为1的列，所以这里要判断一下
    if (states.rightFixedLeafColumnsLength > 0 && states.leafColumnsLength > 0) {
      let lastColumn1 = leafColumns[states.leafColumnsLength - 1];
      let lastColumn2 = leafColumns[states.leafColumnsLength - 2];
      lastColumn1.resizable = false;
      if (!lastColumn1.property && lastColumn2) {
        lastColumn2.resizable = false;
        lastColumn2.width = undefined;
      }
    }
    //...
  }
  

• 非resize列不允许拖拽

  // packages/table/src/table-header.js
  handleMouseDown(event, column) {
    // -345行-非resize不允许拖拽宽度。
    if (!column || !column.resizable) return;
    //...
  }
  

• 打包，项目通过cdn引入（当然也可以使用patch-package定制node_modules）