element-ui —— table 前端缓存手动改变列宽值

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

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

实现思路

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

在期间会遇到两个坑

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

完整代码

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 () {
      let tableWidth = localStorage.getItem('applyTableColWidths')
      if (tableWidth) {
        for (let item = 0; item < this.tableColumns.length; item++) {
          this.tableColumns[item].width = JSON.parse(tableWidth)[item]
        }
      }
    },
    /**
     * 拖动表头改变列宽
     */
    colChange (newWidth, oldWidth, column, event) {
      setTimeout(() => {
        console.log(newWidth, oldWidth, column, event)
        console.log('拖动表头改变列宽')
        let applyTableColWidths = []
        let applyTable = document.getElementById('applyTable')
        let applyTableColgroup = applyTable.getElementsByTagName('colgroup')[0]
        let applyTableCol = applyTableColgroup.getElementsByTagName('col')
        for (let i = 0; i < applyTableCol.length; i++) {
          applyTableColWidths.push(applyTableCol[i].width)
        }
        console.log(applyTableColWidths)
        localStorage.setItem('applyTableColWidths', JSON.stringify(applyTableColWidths))
      }, 100)
    } ,
  mounted () {
    this.getTableColWidth()
  }

如果你也经常使用element-ui 可持续关注 Element UI 入坑小结
如果本文对你有所帮助，感谢点一颗小心心，您的支持是我继续创作的动力！