elementUI—table 前端缓存手动改变列宽值

用vue-cli做项目，引用elementUI组件，实现如下列表。
要求记录用户手动改变的列宽，后台记录的话还要建库存储，就让前端缓存记录。
前端本地存储技术在 H5本地存储—sessionStorage 中已经提及，这里不再多说。

根据 element UI table文档 我们发现可以通过header-dragend事件来获取列宽改变的一些信息

实现思路

• 在每次改变列宽的时候都记录一下当前dom所有列宽值，在再次进入页面时赋值上去

在期间会遇到两个坑

1. localStorage存的是数组，取值的时候却变成了字符串，这时要用JSON.stringify和JSON.parse来做下格式转换；
2. 在触发拖动表头改变列宽事件时，会发现它先获取了当前dom的表头宽度，再进行的改变，这样就会出现每次都“慢半拍”的现象。要解决这个问题，开始想到了 Vue.nextTick 方法，但经试验后并未该问题；最终大神用延迟函数setTimeout的办法实现的~

完整代码

<el-table
  id="applyTable"
  :data="listData"
  height="100%"
  border
  stripe
  @header-dragend="colChange">
  <el-table-column
    v-for="(item,index) in tableColumns"
    :key="index"
    :type="item.type"
    :width="item.width"
    :prop="item.prop"
    :label="item.label">
  </el-table-column>

  <el-table-column
    label="操作"
    :resizable="false">
    <template slot-scope="scope">
      <button class="u-button">填写申请单</button>
      <button class="u-button">删除</button>
    </template>
  </el-table-column>
</el-table>

export default {
  data () {
    return {
      // 列表数据
      listData: [],

      // 列表表格内容
      tableColumns: [
        { type: 'selection', width: '50', prop: '', label: '' },
        { type: 'index', width: '50', prop: '', label: '' },
        { type: '', width: '180', prop: 'patientName', label: '患者姓名' },
        { type: '', width: '60', prop: 'sex', label: '性别' },
        { type: '', width: '', prop: 'deviceType', label: '设备类型' },
        { type: '', width: '', prop: 'applyTime', label: '申请时间' },
        { type: '', width: '', prop: 'imagesNum', label: '图像数' },
        { type: '', width: '', prop: 'uploadStatus', label: '上传状态' },
        { type: '', width: '', prop: 'uploadType', label: '上传方式' }
      ]
    }
  },
  methods: {
    /**
     * 获取浏览器缓存的列宽
     */
    getTableColWidth () {
      var self = this
      var tableWidth = localStorage.getItem('applyTableColWidths')
      if (tableWidth) {
        for (var item = 0; item < self.tableColumns.length; item++) {
          self.tableColumns[item].width = JSON.parse(tableWidth)[item]
        }
      }
    },
    /**
     * 拖动表头改变列宽
     */
    colChange (newWidth, oldWidth, column, event) {
      setTimeout(() => {
        console.log(newWidth, oldWidth, column, event)
        console.log('拖动表头改变列宽')
        var applyTableColWidths = []
        var applyTable = document.getElementById('applyTable')
        var applyTableColgroup = applyTable.getElementsByTagName('colgroup')[0]
        var applyTableCol = applyTableColgroup.getElementsByTagName('col')
        for (var i = 0; i < applyTableCol.length; i++) {
          applyTableColWidths.push(applyTableCol[i].width)
        }
        console.log(applyTableColWidths)
        localStorage.setItem('applyTableColWidths', JSON.stringify(applyTableColWidths))
      }, 100)
    } ,
  mounted () {
    this.getTableColWidth()
  }