关于element-ui:eltable表格拖动列记住列宽度功能刷新页面还在

问题形容

产品大佬说这个表格的列当初是能够拖动，然而拖动了当前，当用户刷新当前，拖动的列的宽度会回到默认的宽度了，所以，减少一个表格拖动列，刷新宽度还在性能。

思路

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

效果图

拖动当前刷新还在哦

打印拖动事件参数

本地存了一份

代码附上

演示成果的话，间接复制粘贴运行即可

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

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

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