el-table表格拖动列记住列宽度功能（刷新页面还在）

问题描述

产品大佬说这个表格的列现在是可以拖动，但是拖动了以后，当用户刷新以后，拖动的列的宽度会回到默认的宽度了，所以，增加一个表格拖动列，刷新宽度还在功能。

思路

刷新还在的功能肯定是要存储一份数据，要么后端存数据库，要么前端存本地。本文说一下前端存本地的写法

效果图

拖动以后刷新还在哦

打印拖动事件参数

本地存了一份

代码附上

演示效果的话，直接复制粘贴运行即可

<template>
  <div class="twoWrap">
    <el-table
      :data="tableBody"
      border
      style="width: 100%"
      :header-cell-style="{
        height: '48px',
        background: '#FAFAFA',
        color: '#333333',
        fontWeight: 'bold',
        fontSize: '15px',
      }"
      @header-dragend="headerDragend"
    >
      <!-- 表头使用tableHeader数据 -->
      <el-table-column
        v-for="(item, index) in tableHeader"
        :key="index"
        :prop="item.propName"
        :label="item.labelName"
        :width="item.width"
      >
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 表头数据
      tableHeader: [
        {
          propName: "name",
          labelName: "姓名",
          width: "auto",
        },
        {
          propName: "age",
          labelName: "年龄",
          // width: 180,
          width: "auto",
        },
        {
          propName: "hobby",
          labelName: "爱好",
          // width: 180,
          width: "auto",
        },
        {
          propName: "home",
          labelName: "家乡",
          // width: 180,
          width: "auto",
        },
      ],
      // 表体数据
      tableBody: [
        {
          name: "孙悟空",
          age: 500,
          hobby: "吃桃子",
          home: "花果山",
        },
        {
          name: "猪八戒",
          age: 88,
          hobby: "吃包子",
          home: "高老庄",
        },
        {
          name: "沙和尚",
          age: 1000,
          hobby: "游泳",
          home: "通天河",
        },
      ],
    };
  },
  created() {
    // 当页面刷新时，若本地存储中存的有表头数组信息，就用本地的。当然第一次本地是没有的
    if (sessionStorage.getItem("tableHeader")) {
      this.tableHeader = JSON.parse(sessionStorage.getItem("tableHeader"));
    }
  },
  methods: {
    // 表头拖动事件
    headerDragend(newWidth, oldWidth, column, event) {
      // 饿了么UI中提供的有对应参数，主要用到的是newWidth和column.property
      console.log(newWidth, oldWidth, column, event);

      // 根据column中的信息就可以知道用户拖动的是哪一列，从而将新的列宽度替换原来的列宽度
      let newTableHeader = this.tableHeader.map((item, index) => {
        if (item.propName == column.property) {
          item.width = newWidth;
        }
        return item;
      });

      // 最后存一份到本地，当刷新的时候，就用本地的这个记录了用户拖动宽度的表头数组数据
      sessionStorage.setItem("tableHeader", JSON.stringify(newTableHeader));
    },
  },
};
</script>

如果是后端存一份也是一个道理，只要在表格拖动事件的回调函数中把对应列的宽度更改即可，然后告知后端（比如通过接口）当然表头数据也要通过后端获取，就不是前端代码中写死的了

好记性不如烂笔头，记录一下把 ^_^