el-table表格拖动列记住列宽度功能(刷新页面还在)

简介: el-table表格拖动列记住列宽度功能(刷新页面还在)

问题描述

产品大佬说这个表格的列现在是可以拖动,但是拖动了以后,当用户刷新以后,拖动的列的宽度会回到默认的宽度了,所以,增加一个表格拖动列,刷新宽度还在功能。

思路

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

效果图

1.gif

拖动以后刷新还在哦

打印拖动事件参数

2.png

本地存了一份

3.png

代码附上

演示效果的话,直接复制粘贴运行即可

<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>
如果是后端存一份也是一个道理,只要在表格拖动事件的回调函数中把对应列的宽度更改即可,然后告知后端(比如通过接口)当然表头数据也要通过后端获取,就不是前端代码中写死的了

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

相关文章
layUI数据表格可编辑表格单元格值修改之后获取修改前的值
layUI数据表格可编辑表格单元格值修改之后获取修改前的值
372 0
|
7月前
用dragstart、drag、dragend、dragover、drop、dragleave实现针对表格列的顺序进行拖拽排序(附带实现选择某几列数据显示或隐藏)
用dragstart、drag、dragend、dragover、drop、dragleave实现针对表格列的顺序进行拖拽排序(附带实现选择某几列数据显示或隐藏)
|
JavaScript
element-UI el-table动态显示隐藏列造成固定一侧的列(fixed=“left/right“)错误显示
问题原因:多个tabs共用一个实体,动态显示隐藏列 出现了固定在右侧的列(fixed="right")错位 【解决方案】 表格的重新布局,只要table数据发生变化的时候就重新渲染表格 ```js this.$nextTick(() => { this.$refs.formname.doLayout() }) ``` 参考element官方文档 ![请在此添加图片描述](https://developer-private-1258344699.cos.ap-guangzhou.myqcloud.com/column/article/5877188/20231030-e40
272 0
element-UI el-table动态显示隐藏列造成固定一侧的列(fixed=“left/right“)错误显示
|
6月前
|
JavaScript 前端开发
table表格和下拉组件中data为什么必须是一个函数?
table表格和下拉组件中data为什么必须是一个函数?
|
7月前
el-select如何自定义下拉选项框的宽度
el-select如何自定义下拉选项框的宽度
988 0
|
7月前
elementUI 写一个表头列名、表体单元格样式、翻页器相对较为动态的表格el-table
elementUI 写一个表头列名、表体单元格样式、翻页器相对较为动态的表格el-table
elementUI 写一个表头列名、表体单元格样式、翻页器相对较为动态的表格el-table
|
JavaScript
VUE element-ui之table表格勾选复选框动态合计某列的值
VUE element-ui之table表格勾选复选框动态合计某列的值
608 0
VUE element-ui之table表格勾选复选框动态合计某列的值
|
JavaScript
layUI数据表格可编辑扩展日期框
layUI数据表格可编辑扩展日期框
121 0
|
缓存 JavaScript 前端开发
el-table 列的动态显示与隐藏
当我们在对表格数据查看的时候,可能某些列的数据是当前想要重点关注的,而某些列并不需要展示出来,我们就可以通过对表格的列进行实时的一个切换去实现动态的显示与隐藏。