基于 Element UI 的高效前端表格模板开发

在前端开发中，表格展示和搜索功能是常见的需求之一。为了提高开发效率，我们可以通过创建一个可复用的表格模板来应对各种类似的场景。本文将分享一个基于 Element UI 的表格模板，它包含了搜索、分页和操作按钮等功能，可以作为未来项目开发的基础。

模板概览

首先，让我们来概览一下这个表格模板的基本结构：

1. 头部搜索区域：包含设备名称、设备状态和审核状态的搜索条件。
2. 表格内容：展示数据列表，包括序号、设备名称、设备状态、审核状态和操作按钮。
3. 分页组件：实现数据的分页显示。

模板效果

代码实现

模板结构

<template>
  <div class="main">
    <div class="content">
      <!-- 头部搜索form -->
      <div class="header">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="设备名称">
            <el-input v-model="formInline.channelName" placeholder="请输入设备名称" clearable></el-input>
          </el-form-item>
          <el-form-item label="设备状态">
            <el-select v-model="formInline.channelStatus" placeholder="请选择设备状态" clearable>
              <el-option
                v-for="(item, index) in channelStatusOption"
                :key="index"
                :label="item.label"
                :value="Number(item.value)"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="审核状态">
            <el-select v-model="formInline.auditResult" placeholder="请选择审核状态" clearable>
              <el-option
                v-for="(item, index) in auditResultOption"
                :key="index"
                :label="item.label"
                :value="Number(item.value)"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="searchForm()">查询</el-button>
            <el-button @click="resetForm()">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <!-- 表格内容 -->
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        stripe
        cell-class-name="cell-class-name"
        :header-cell-style="{
          'background-color': 'transparent',
          'font-weight': '400',
          'font-size': '28px',
          color: '#cbe5fa',
          'text-align': 'center',
          'padding-top': '7px',
          'padding-bottom': '18px',
          height: '64px',
        }"
        :cell-style="{
          'text-align': 'center',
          'font-weight': '400',
          'font-size': '22px',
          color: '#91A5B6',
          height: '64px',
        }">
        <el-table-column label="序号" width="100" type="index" show-overflow-tooltip></el-table-column>
        <el-table-column prop="channelName" label="设备名称" show-overflow-tooltip></el-table-column>
        <el-table-column prop="channelStatus" label="设备状态" show-overflow-tooltip></el-table-column>
        <el-table-column prop="auditResult" label="审核状态" show-overflow-tooltip></el-table-column>
        <el-table-column label="操作" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-button type="text" @click="handleRealtimeVideo(scope.$index, scope.row)">实时视频</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页组件 -->
      <div class="paginationContent">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="page.pageSize"
          :current-page="page.currentPage"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalNum"></el-pagination>
      </div>
    </div>
  </div>
</template>

数据和方法

<script>
  import { basicOverviewList } from '@/api/bigScreen_sxycpc/home.js'
  export default {
    name: 'basicOverviewList',
    data() {
      return {
        // 设备状态下拉选项
        channelStatusOption: [
          {
            label: '在线',
            value: '1',
          },
          {
            label: '不在线',
            value: '0',
          },
        ],
        // 审核状态下拉选项
        auditResultOption: [
          {
            label: '未审核',
            value: '0',
          },
          {
            label: '审核未通过',
            value: '1',
          },
          {
            label: '审核已通过',
            value: '2',
          },
        ],
        // 头部搜索条件绑定数据
        formInline: {
          channelName: '', //设备名称
          channelStatus: '', // 设备状态
          auditResult: '', //审核状态
        },
        // 分页数据
        page: {
          pageSize: 10,
          currentPage: 1,
        },
        // 列表总数
        totalNum: 0,
        // 列表数据
        tableData: [],
      }
    },
    computed: {},
    mounted() {
      this.getData()
    },
    methods: {
      // 查看实时视频
      handleRealtimeVideo(index, row) {
        console.log(index, row, '实时视频')
      },
      // 获取列表
      getData() {
        console.log('获取列表')
        let params = {
          pageNum: this.page.currentPage,
          pageSize: this.page.pageSize,
          channelName: this.formInline.channelName,
          channelStatus: this.formInline.channelStatus,
          auditResult: this.formInline.auditResult,
        }
        basicOverviewList(params).then(res => {
          console.log(res, '列表')
          this.tableData = res.rows
          this.totalNum = res.total
        })
      },
      // 查询按钮
      searchForm() {
        this.page.currentPage = 1
        this.getData()
      },
      // 重置按钮
      resetForm() {
        this.formInline = {
          channelName: '',
          channelStatus: '',
          auditResult: '',
        }
        this.page.currentPage = 1
        this.getData()
      },
      // 切换每页几条数据
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`)
        this.page.pageSize = val
        this.page.currentPage = 1
        this.getData()
      },
      // 切换当前第几页
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`)
        this.page.currentPage = val
        this.getData()
      },
    },
  }
</script>

样式定制

在前端开发中，样式定制是一个动态的过程，它需要根据当前项目的需求和设计稿进行调整。在本表格模板中，我们提供了一套基础的样式代码，并为关键部分添加了注释，这样做的目的是为了在将来设计稿更新或需求变更时，能够快速地定位和调整相应的样式。

以下是一些关键的样式部分，以及它们可能需要根据设计稿进行调整的场景：

** 1.表格头部和单元格样式**：表格的头部和单元格样式对于数据的展示至关重要。设计稿可能会指定字体样式、背景色、边框等。通过注释，你可以快速定位到

::v-deep .el-table th

和

::v-deep .el-table td

类名，并根据设计稿的要求进行调整。

** 2.表单输入框和按钮样式**：这些样式通常需要与设计稿中的颜色方案、字体大小和按钮尺寸保持一致。通过查看注释，你可以迅速找到

::v-deep .el-input__inner

和

::v-deep .el-button

等类名，并根据需要调整它们的属性。

** 3.表格的斑马纹和悬浮效果**：为了增强数据的可读性，我们可能需要为表格行添加斑马纹或悬浮效果。通过注释，你可以轻松地定位到

::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td

和相关的悬浮效果类名，并进行相应的调整。

** 4.分页组件的样式**：分页组件的样式同样需要与整体设计保持一致，包括按钮的颜色、大小和激活状态的高亮。注释将指导你到

::v-deep .el-pager li

和其他相关类名，以便快速修改。

通过这种方式，样式代码不仅是页面呈现的基础，也是快速响应设计变更的关键。在未来的项目中，无论是颜色方案的更新、布局的调整还是新功能的添加，你都可以利用这些注释来快速定位和修改样式，确保开发效率和最终的用户体验。

<style lang="scss" scoped>
  /* 主容器样式 */
  .main {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    /* 内容容器样式 */
    .content {
      width: 100%;
      flex: 1;
      display: flex;
      flex-direction: column;
      /* 头部搜索区域样式 */
      .header {
        width: 100%;
        height: 48px; // 使用pxToRem函数转换为rem单位
        margin-bottom: 22px;
        /* 深度选择器，确保样式能够覆盖Element UI的默认样式 */
        ::v-deep .el-form {
          display: flex;
          align-items: center;
          /* 将查询和重置按钮放在表单的末尾 */
          ::v-deep .el-form-item:last-child {
            margin-left: auto;
          }
        }
        /* 搜索表单项样式 */
        ::v-deep .el-form-item {
          display: flex;
          align-items: center;
          /* 搜索框和下拉选择框的标签样式 */
          ::v-deep .el-form-item__label {
            font-weight: 400;
            font-size: 28px;
            color: rgba(255, 255, 255, 0.6);
            padding: 0 17px 0 0;
          }
          /* 输入框样式 */
          ::v-deep .el-input__inner {
            width: 200px;
            height: 48px;
            background: #000000;
            border-radius: 4px;
            font-weight: 400;
            font-size: 20px;
            color: #3671c0;
            border: 1px solid #3694e8;
            padding: 2px 24px;
          }
          /* 按钮样式 */
          ::v-deep .el-button {
            width: 87px;
            height: 48px;
            background: rgba(54, 113, 192, 0.5);
            border-radius: 4px;
            border: 1px solid #3694e8;
            font-weight: 400;
            font-size: 20px;
            color: #ffffff;
          }
        }
      }
      /* 分页组件样式 */
      .paginationContent {
        margin-top: 20px;
        margin-left: auto;
        /* 分页组件中总页数的样式 */
        ::v-deep .el-pagination__total {
          font-weight: normal;
          font-size: 16px;
          color: #ffffff;
        }
        /* 分页组件中选择每页显示数量的下拉框样式 */
        ::v-deep .el-pagination .el-select .el-input .el-input__inner {
          font-size: 16px;
          color: #ffffff;
          background: transparent;
          border-radius: 4px;
          border: 1px solid #b9b9b9;
        }
        /* 分页组件中分页按钮的样式 */
        ::v-deep .el-pager li {
          margin-right: 8px;
          background: rgba(10, 65, 139, 0.5);
          border-radius: 4px;
          color: #ffffff;
        }
        /* 当前激活的分页按钮样式 */
        ::v-deep .el-pager li.active {
          background: #046bff;
        }
      }
    }
  }
  /* 表格操作按钮的样式 */
  ::v-deep .el-button--text {
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 400;
    font-size: 22px;
    color: #48a8ff;
  }
  /* 表格单元格提示的样式 */
  ::v-deep .el-tooltip__popper {
    font-weight: 400;
    font-size: 22px;
    color: #ffffff;
  }
  /* 表格滚动条的样式 */
  ::v-deep .el-table__body-wrapper {
    height: 450px;
    overflow-y: auto;
  }
  /* 表格斑马纹样式 */
  ::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td {
    background: rgba(10, 65, 139, 0.31);
  }
  /* 表格头部单元格样式 */
  ::v-deep .el-table th.el-table__cell > .cell {
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  /* 表格内容单元格样式 */
  ::v-deep .el-table td.el-table__cell div {
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  /* 去除表格单元格边框 */
  ::v-deep .el-table__row > td {
    border: none;
  }
  /* 去除表格头部单元格上边框 */
  ::v-deep .el-table th.is-leaf {
    border: none;
  }
  /* 去除表格底部边框 */
  ::v-deep .el-table::before {
    height: 0;
  }
  /* 设置表格边框颜色 */
  ::v-deep .el-table {
    --el-table-border-color: #fff;
  }
  /* 表格背景色设置 */
  ::v-deep .el-table,
  ::v-deep .el-table__expanded-cell {
    background-color: transparent;
  }
  /* 表格内部背景色设置 */
  ::v-deep .el-table th,
  ::v-deep .el-table tr,
  ::v-deep .el-table td {
    background-color: transparent;
  }
  /* 表格行悬浮背景色设置 */
  ::v-deep .el-table .el-table__body tr:hover > td {
    background-color: inherit;
  }
}
</style>

使用说明

1. 数据绑定：将 formInline 对象中的属性与搜索表单的输入框进行绑定。
2. 获取数据：getData 方法用于从后端获取数据，并根据搜索条件进行筛选。
3. 分页控制：通过监听 size-change 和 current-change 事件来控制分页。
4. 样式定制：根据项目需求调整表格和分页组件的样式。

结语

通过使用这个模板，你可以快速地为项目添加表格展示和搜索功能，大大提升开发效率。同时，模板的可复用性和可定制性也使得它能够适应不同的项目需求。

希望这个分享能够帮助到正在前端开发道路上的你，如果你有任何问题或建议，欢迎在评论区交流。让我们一起进步，创造更高效、更优雅的前端代码！