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

问题描述

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

思路

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

效果图

el-table表格拖动列记住列宽度功能(刷新页面还在)_第1张图片

拖动以后刷新还在哦

打印拖动事件参数

el-table表格拖动列记住列宽度功能(刷新页面还在)_第2张图片

本地存了一份

el-table表格拖动列记住列宽度功能(刷新页面还在)_第3张图片

代码附上

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



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

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

你可能感兴趣的:(element-ui)