作为前端开发人员,双手会敲键盘,大脑会思考。今天分享几个后台管理系统开发中切实有用的、提升用户体验的、容易忽略的小细节,以及分享几个常用组件。
技术框架:vue3+ElementUI
表格交互优化项:
1.表格头部,一行展示,文本超出隐藏。
2.表头列宽记忆,拖拽后记忆,保存。
3.表头单元格很多,提供自定义列,选择展示。
4.数据表格,支持全屏展示。
5.节省可视空间,可将头部筛选项、分页按钮、操作按钮使用下拉框方式隐藏。
1.表格头部,一行展示,文本超出隐藏
实现方式,使用 header-cell-class-name
给 el-table 表格表头单元格增加 className
header-cell-class-name="table-header-ellipsis"
.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.表头列宽记忆,拖拽后记忆,保存。
实现方式:拖动表头改变了列的宽度的时候会触发@header-dragend
事件, 将表格的宽度数据记录在localStorage中,渲染表格时,读取数据设置列宽
@header-dragend="headerDragend"
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.表头单元格很多,提供自定义列,选择展示。
实现方式:弹窗读取所有的字段的配置,点击确定时根据配置渲染表格
4.数据表格,支持全屏展示。
实现方式:增加一按钮,控制是否全屏,动态给表格加上ClassName
<div :class="{'fullscreen-table':isFullScreen}">
<div
v-if="isFullScreen"
class="fullscreen-close-wrap"
@click="isFullScreen=false">
<el-icon><CircleClose /></el-icon>
</div>
<el-table
v-loading="loading"
:data="tableData"
:table-header-type="tableHeaderType"
:header-cell-style="{ background:'#f6f6f6', color:'#606266'}"
:header-cell-class-name="headerEllipsis ? 'c-table-header-ellipsis' : ''"
@header-dragend="headerDragend">
<slot />
</el-table>
</div>
.fullscreen-table {
position: fixed;
top: 0;
left: 0;
z-index: 20;
width: 100%;
height: 100%;
overflow: auto;
background: #fff;
}
5.节省可视空间,可将头部筛选项、分页按钮、操作按钮使用下拉框方式隐藏。
实现方式:头部筛选项下拉选择,这里实现方式是读取el-select
或者el-input
的 placeholder
,通过ref的方式找到相应的筛选项,通过设置display: none
,实现显示隐藏。(这里有个前提条件,需要对筛选项进行组件的统一)。具体实现方式可结合系统现状进行处理。
下面的图片是分页按钮、操作按钮的下拉。具体实现需结合实际情况。
原文链接:https://juejin.cn/post/7218103876304797754 作者:林深深见陆