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

4次阅读

共计 1740 个字符，预计需要花费 5 分钟才能阅读完成。

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

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

拖动当前刷新还在哦

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

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