幾種場景

• 所有列均不設置寬度，（初次加載和拖拽時）列寬自適應，不會出現空白（列）
• 部分列設置寬度，（初次加載和拖拽時）列寬自適應，不會出現空白（列）
• 所有列都設置寬度，（初次加載和拖拽時）列寬總和沒有超出容器寬度時，會出現空白（列）

解決方式

簡單處理

• 至少一列設置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）