大航母网站建设服务,毕业设计开发网站要怎么做,怎么搞一个服务器建设网站,网站页面制作建议需求背景
后台管理页面有一个非常大的表格#xff0c;由于屏幕大小限制#xff0c;需要滚动查看数据。 不同的管理员关注的数据列不同#xff0c;希望实现用户自定义表格展示顺序。
方案分析
后端根据登录用户信息返回对应表头数据。#xff08;账号区分 后端存储…需求背景
后台管理页面有一个非常大的表格由于屏幕大小限制需要滚动查看数据。 不同的管理员关注的数据列不同希望实现用户自定义表格展示顺序。
方案分析
后端根据登录用户信息返回对应表头数据。账号区分 后端存储后端存储较简单但需要服务端配合提供接口。前端将表头数据保存LocalStorage。浏览器区分 前端存储
具体实现 示例基于vueivew实现其他框架同理 首先简单搭建一下页面结构 !-- 数据表格 --Table:columnscolumns:keytableKey:datadata....../Table!--通过弹窗或者抽屉包裹一个表头数据表格 --ModalTabledraggable:columnstableHeadColumns:datacolumnson-drag-droptableHeadDrop !--这里通过表格拖拽API实现表头数据顺序调整 --.../Table/Modaldata() {originColunms: [...] // 保存初始的数据表格表头结构columns: originColunms, // 数据表的表头结构同时也是表头表格的数据data: [] // 数据表格的数据tableHeadColumns: [], // 表头表格的表头结构
}
methods: {// 保存表格标题栏顺序、数量saveColumnsConfig() {// 拖拽API函数接受参数为交换的两个位置下标tableHeadDrop(index1, index2) {;[this.columns[index1], this.columns[index2]] [this.columns[index2], this.columns[index1]]this.tableKey 1 // 修改完成后要更新列表key,否则表头顺序调整无法更新到数据表格中this.saveColumnsConfig()}
}这样就实现了调整表头顺序的功能但是有个问题页面刷新之后表格会恢复原始状态这时候就需要用到localStorage来做存储
methods: {// 将调整之后的表头数据保存在localStoragesaveColumnsConfig() {const tempColumns this.columns.map((item) {const { slot , key , title } item || {}return {slot,key,title,}})localStorage.setItem(dataTableColumns, JSON.stringify(tempColumns))}// 拖拽API函数接受参数为交换的两个位置下标tableHeadDrop(index1, index2) {;[this.columns[index1], this.columns[index2]] [this.columns[index2], this.columns[index1]]this.tableKey 1this.saveColumnsConfig()}
}
// 页面加载的时候给columns赋值
created() {if (localStorage.getItem(dataTableColumns)) {this.columns JSON.parse(localStorage.getItem(dataTableColumns))}
}到这里整个功能就实现了需求中还有一个复原的按钮实现方式就是将columns的值还原为originColunms 但是这样的方案有个缺点当服务端有数据列的修改时需要用户手动还原一次。
