作为前端开发人员，双手会敲键盘，大脑会思考。今天分享几个后台管理系统开发中**切实有用的**、**提升用户体验的**、**容易忽略的**小细节，以及分享几个常用组件。 ### 技术框架：vue3+ElementUI ### 表格交互优化项： 1.表格头部，一行展示，文本超出隐藏。 2.表头列宽记忆，拖拽后记忆，保存。 3.表头单元格很多，提供自定义列，选择展示。 4.数据表格，支持全屏展示。 5.节省可视空间，可将头部筛选项、分页按钮、操作按钮使用下拉框方式隐藏。 #### 1.表格头部，一行展示，文本超出隐藏 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d3ec3a649dd3479081fd2707ccf967a9~tplv-k3u1fbpfcp-watermark.image?) ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5df623e3714745299aead6762773ec43~tplv-k3u1fbpfcp-watermark.image?) 实现方式，使用 `header-cell-class-name` 给 el-table 表格表头单元格增加 className `header-cell-class-name="table-header-ellipsis"` ```style .table-header-ellipsis { > .cell { text-overflow: ellipsis; white-space: nowrap; } &.is-sortable { > .cell { padding-right: 20px; .caret-wrapper { position: absolute; top: 50%; transform: translateY(-50%); right: 0; } } } } ``` #### 2.表头列宽记忆，拖拽后记忆，保存。 ![列宽记忆.gif](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f53fb60e6cca4ecc924b157bee58faed~tplv-k3u1fbpfcp-watermark.image?) 实现方式：拖动表头改变了列的宽度的时候会触发`@header-dragend`事件, 将表格的宽度数据记录在localStorage中，渲染表格时，读取数据设置列宽 `@header-dragend="headerDragend"` ```js headerDragend({ column }) { if (this.tableHeaderType) { const tableHeader = localStorage.getItem("tableHeader") ? JSON.parse(localStorage.getItem("tableHeader")) : {}; if (!Object.hasOwnProperty.call(tableHeader, this.tableHeaderType)) { tableHeader[this.tableHeaderType] = {}; } const property = column.property || column.label; tableHeader[this.tableHeaderType][property] = column.width; localStorage.setItem("tableHeader", JSON.stringify(tableHeader)); } } ``` #### 3.表头单元格很多，提供自定义列，选择展示。 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a41627552ed24479a65b61b69192c9a8~tplv-k3u1fbpfcp-watermark.image?) 实现方式：弹窗读取所有的字段的配置，点击确定时根据配置渲染表格 #### 4.数据表格，支持全屏展示。 ![表格全屏.gif](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e75a197029804ea4bda941ead92186e9~tplv-k3u1fbpfcp-watermark.image?) 实现方式：增加一按钮，控制是否全屏，动态给表格加上ClassName ```js

``` ```style .fullscreen-table { position: fixed; top: 0; left: 0; z-index: 20; width: 100%; height: 100%; overflow: auto; background: #fff; } ``` #### 5.节省可视空间，可将头部筛选项、分页按钮、操作按钮使用下拉框方式隐藏。 ![筛选项.gif](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3d9791cfb51a4cee8d492f0811cf33f2~tplv-k3u1fbpfcp-watermark.image?) 实现方式：头部筛选项下拉选择，这里实现方式是读取`el-select`或者`el-input`的 `placeholder`，通过ref的方式找到相应的筛选项，通过设置`display: none`，实现显示隐藏。（这里有个前提条件，需要对筛选项进行组件的统一）。具体实现方式可结合系统现状进行处理。 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/15f5601fc53941168d77a64b7d6bed4b~tplv-k3u1fbpfcp-watermark.image?) 下面的图片是分页按钮、操作按钮的下拉。具体实现需结合实际情况。