el-table拖动列记住宽度

headerDragend表格拖动事件，拿到拖动的列名、原始宽度、拖动后宽度。然后保存在缓存中，刷新界面从缓存里面拿列的宽度。

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