需求背景
后台管理页面有一个非常大的表格,由于屏幕大小限制,需要滚动查看数据。
不同的管理员关注的数据列不同,希望实现用户自定义表格展示顺序。
方案分析
- 后端根据登录用户信息返回对应表头数据。(账号区分 + 后端存储)后端存储较简单,但需要服务端配合提供接口。
- 前端将表头数据保存LocalStorage。(浏览器区分 + 前端存储)
具体实现
示例基于vue+ivew实现,其他框架同理
首先简单搭建一下页面结构
<!-- 数据表格 -->
<Table
:columns="columns"
:key="tableKey"
:data="data"
...
>...</Table>
<!--通过弹窗或者抽屉包裹一个表头数据表格 -->
<Modal>
<Table
draggable
: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: {
// 将调整之后的表头数据保存在localStorage
saveColumnsConfig() {
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 += 1
this.saveColumnsConfig()
}
}
// 页面加载的时候给columns赋值
created() {
if (localStorage.getItem('dataTableColumns')) {
this.columns = JSON.parse(localStorage.getItem('dataTableColumns'))
}
}
到这里整个功能就实现了,需求中还有一个复原的按钮,实现方式就是将columns
的值还原为originColunms
但是这样的方案有个缺点,当服务端有数据列的修改时,需要用户手动还原一次。