研发笔记——localstorage实现tabel表格表头自定义

需求背景

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

方案分析

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

具体实现

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

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

    
    <Table
      :columns="columns"
      :key="tableKey"
      :data="data"
	...
    >...Table>
    
    
    <Modal>
    	<Table
        draggable
        :columns="tableHeadColumns"
        :data="columns"
        @on-drag-drop="tableHeadDrop" 
	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()
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

这样就实现了调整表头顺序的功能，但是有个问题，页面刷新之后表格会恢复原始状态，这时候就需要用到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'))
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

到这里整个功能就实现了，需求中还有一个复原的按钮，实现方式就是将columns的值还原为originColunms
但是这样的方案有个缺点，当服务端有数据列的修改时，需要用户手动还原一次。