问题描述
产品大佬说这个表格的列现在是可以拖动,但是拖动了以后,当用户刷新以后,拖动的列的宽度会回到默认的宽度了,所以,增加一个表格拖动列,刷新宽度还在功能。
思路
刷新还在的功能肯定是要存储一份数据,要么后端存数据库,要么前端存本地。本文说一下前端存本地的写法
效果图
文章图片
拖动以后刷新还在哦打印拖动事件参数
文章图片
本地存了一份
【el-table表格拖动列记住列宽度功能(刷新页面还在)】
文章图片
代码附上 演示效果的话,直接复制粘贴运行即可
如果是后端存一份也是一个道理,只要在表格拖动事件的回调函数中把对应列的宽度更改即可,然后告知后端(比如通过接口)当然表头数据也要通过后端获取,就不是前端代码中写死的了好记性不如烂笔头,记录一下把
^_^
推荐阅读
- element-ui|如何对 el-table列表项 内的 form表单元素 使用 自定义规则校验
- el-button type=text 文字按钮 边框去除和添加
- vue|vue el-upload 组件上传的 文件跟随表单数据 发送后台保存
- 前端|Vue Element UI Table 表自动生成 Table 表封装 2.0(详细教程)
- element-ui 中el-select 嵌套 tree树形控件
- elementUI|element-ui 之 el-tooltip 如何自定义修改样式(???)
- vue|vue爬坑记:element-ui的标签页之间跳转的手动控制