问题描述

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

思路

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

效果图

拖动以后刷新还在哦

打印拖动事件参数本地存了一份代码附上

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

<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>

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

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