问题形容
产品大佬说这个表格的列当初是能够拖动，然而拖动了当前，当用户刷新当前，拖动的列的宽度会回到默认的宽度了，所以，减少一个表格拖动列，刷新宽度还在性能。
思路
刷新还在的性能必定是要存储一份数据，要么后端存数据库，要么前端存本地。本文说一下前端存本地的写法
效果图
拖动当前刷新还在哦
打印拖动事件参数
本地存了一份
代码附上
演示成果的话，间接复制粘贴运行即可
<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>如果是后端存一份也是一个情理，只有在表格拖动事件的回调函数中把对应列的宽度更改即可，而后告知后端（比方通过接口）当然表头数据也要通过后端获取，就不是前端代码中写死的了
好忘性不如烂笔头，记录一下把 ^_^