Problem description

The columns in the table can now be dragged, but after dragging, when the user refreshes, the width of the dragged column will return to the default width, so add a drag column and refresh the width is still functional.

Train of thought

The refresh function must store a piece of data, either in the back-end database or locally in the front-end. This article says the front-end storage local writing method

rendering

Drag to refresh after oh

Print drag event parameters

I have a copy stored locally

Code attached

To demonstrate the effect, just copy and paste to run

<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"
    >
      <! -- Use tableHeader data -->
      <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 {
      // Table header data
      tableHeader: [{propName: "name".labelName: "Name".width: "auto"}, {propName: "age".labelName: "Age".// width: 180,
          width: "auto"}, {propName: "hobby".labelName: "Hobby".// width: 180,
          width: "auto"}, {propName: "home".labelName: "Home".// width: 180,
          width: "auto"],},// Table body data
      tableBody: [{name: "Sun Wukong".age: 500.hobby: "Eat the peach.".home: "Flower and Fruit Hill"}, {name: "Pig Eight Quit".age: 88.hobby: "Eat steamed stuffed bun".home: "Lao Zhuang Gao"}, {name: "Sand Monk".age: 1000.hobby: "Swimming".home: "Tongtian River",}]}; },created() {
    // When the page is refreshed, if the local store contains the header array information, the local store is used. Of course the first time is not local
    if (sessionStorage.getItem("tableHeader")) {
      this.tableHeader = JSON.parse(sessionStorage.getItem("tableHeader")); }},methods: {
    // Table header drag event
    headerDragend(newWidth, oldWidth, column, event) {
      // The UI provides corresponding parameters, mainly using newWidth and column.property
      console.log(newWidth, oldWidth, column, event);

      // Based on the information in column, you can tell which column the user is dragging, and replace the old column width with the new column width
      let newTableHeader = this.tableHeader.map((item, index) = > {
        if (item.propName == column.property) {
          item.width = newWidth;
        }
        return item;
      });

      // Finally save a local copy, when refreshed, use the local record of the user drag width of the header array data
      sessionStorage.setItem("tableHeader".JSON.stringify(newTableHeader)); ,}}};</script>
Copy the code

If it is the back end to save a copy of the same reason, as long as the table drag event callback function to change the width of the corresponding column, and then tell the back end (such as through the interface) of course, the table header data also need to get through the back end, not front-end code written dead

A good memory is better than a bad pen, take notes on ^_^