需求背景

后台管理页面有一个非常大的表格，由于屏幕大小限制，需要滚动查看数据。
不同的管理员关注的数据列不同，希望实现用户自定义表格展示顺序。

方案分析

1. 后端根据登录用户信息返回对应表头数据。（账号区分 + 后端存储）后端存储较简单，但需要服务端配合提供接口。
2. 前端将表头数据保存LocalStorage。（浏览器区分 + 前端存储）

具体实现

示例基于vue+ivew实现，其他框架同理

首先简单搭建一下页面结构

    <!-- 数据表格 --><Table:columns="columns":key="tableKey":data="data"...>...</Table><!--通过弹窗或者抽屉包裹一个表头数据表格 --><Modal><Tabledraggable:columns="tableHeadColumns":data="columns"@on-drag-drop="tableHeadDrop" <!--这里通过表格拖拽API实现表头数据顺序调整 -->>...</Table></Modal>

data() {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
但是这样的方案有个缺点，当服务端有数据列的修改时，需要用户手动还原一次。