后台管理系统容易忽略的表格优化项

作为前端开发人员，双手会敲键盘，大脑会思考。今天分享几个后台管理系统开发中切实有用的、提升用户体验的、容易忽略的小细节，以及分享几个常用组件。

技术框架：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，实现显示隐藏。（这里有个前提条件，需要对筛选项进行组件的统一）。具体实现方式可结合系统现状进行处理。

下面的图片是分页按钮、操作按钮的下拉。具体实现需结合实际情况。