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

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


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

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

在期间会遇到两个坑

  1. localStorage存的是数组,取值的时候却变成了字符串,这时要用JSON.stringifyJSON.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()
  }

推荐阅读更多精彩内容

  • 一:什么是闭包?闭包的用处? (1)闭包就是能够读取其他函数内部变量的函数。在本质上,闭包就 是将函数内部和函数外...
    xuguibin阅读 2,703评论 1 46
  • pdf下载地址:Java面试宝典 第一章内容介绍 20 第二章JavaSE基础 21 一、Java面向对象 21 ...
    王震阳阅读 72,964评论 25 504
  • 只要先反过来看,再看潜台词,第三看五名法官为什么明显瞎判,第四对比看,就能捋清这个问题的答案了。 一、反过来看。假...
    天人对话阅读 56评论 0 0
  • var xxx = ... 总是返回undefined, 实际上此时变量已经定义好,如:var BN =web3....
    charlieyan阅读 408评论 0 1
  • 1 学校里人很多,即使是农村,即使是小学,一个不太起眼的农村小学。 在这个学校里面有三支队伍。噢,不,是四支队伍。...
    伊水山人阅读 94评论 2 2