elementUi自定义table列宽并把列宽永久储存在localStorage中，一级表头用户自定义列宽，二级表头用户自定义列宽并储存在本地。

html部分

table事件	作用	参数
header-dragend	当拖动表头改变了列的宽度的时候会触发该事件	newWidth, oldWidth, column, event

js部分 

// 设置保存列宽到 localStorage 里边
surverWidth(newWidth, oldWidth, column, event) {
  setTimeout(() => {
    let tableColWidths = [];
    // 根据id 获取到table的dom元素
    let table = document.getElementById(this.mbid);
    // 拿到table的列组
    let tableColgroup = table.getElementsByTagName("colgroup")[0];
    // 获取到每一列的dom元素
    let ctableCol = tableColgroup.getElementsByTagName("col");
    // 每次修改都重新遍历每一列，获取到宽度并储存进localStorage中
    for (let i = 0; i < ctableCol.length; i++) {
      tableColWidths.push(ctableCol[i].width);
    }
    this.setStorage(this.mbid, tableColWidths);
  }, 100);
},
// 获取储存的table列宽度并赋值给每一列
getTableColWidth() {
  let tableWidth = this.getStorage(this.mbid);
  if (tableWidth) {
    this.columns.forEach((item, index) => {
      item.width = tableWidth[index];
    });
  }
},
setStorage(key, value) {
  localStorage.setItem(key, JSON.stringify(value));
},
getStorage(key) {
  let value = localStorage.getItem(key);
  return JSON.parse(value);
},

 在请求到后端的tableData数据后调用 getTableColWidth() 来设置table每一列的宽度。

二级表头宽度赋值

代码中只对一级表头有效，因为我的项目中有可能会出现二级表头所以就需要遇到二级表头再次循环进行宽度赋值 我的二级表头是通过 multiColumns 来循环出来的，所以先定义一个number来记录当前循环一共循环了多少次（tableWidth的下标），一级表头和二级表头循环的时候都++，这样就能给二级表头的宽度正确的赋值了，类似将多维数组扁平化了。

getTableColWidth() {
  let tableWidth = this.getStorage(this.mbid);
  if (tableWidth) {
    let number = 0; // 次数，
    this.columns.forEach((item, index) => {
      // 是多级表头的时候再次循环进行宽度赋值
      if (item.multiColumns && item.input_mode == "colCol") {
        item.multiColumns.forEach((item2) => {
          // 多级表头用 number 为了正确的把宽度赋值给table的每一列
          item2.width = tableWidth[number];
          // 不管是一级还是二级表头每循环一次，tableWidth的下标++,
          number++;
        });
      } else {
        // 一级表头还是用当前第几列的下标
        item.width = tableWidth[index];
        number++;
      }
    });
  }
},