在前端开发中，表格展示和搜索功能是常见的需求之一。为了提高开发效率，我们可以通过创建一个可复用的表格模板来应对各种类似的场景。本文将分享一个基于 Element UI 的表格模板，它包含了搜索、分页和操作按钮等功能，可以作为未来项目开发的基础。
模板概览
首先，让我们来概览一下这个表格模板的基本结构：
- 头部搜索区域：包含设备名称、设备状态和审核状态的搜索条件。
- 表格内容：展示数据列表，包括序号、设备名称、设备状态、审核状态和操作按钮。
- 分页组件：实现数据的分页显示。
模板效果
代码实现
模板结构
<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>使用说明
- 数据绑定：将
formInline对象中的属性与搜索表单的输入框进行绑定。 - 获取数据：
getData方法用于从后端获取数据，并根据搜索条件进行筛选。 - 分页控制：通过监听
size-change和current-change事件来控制分页。 - 样式定制：根据项目需求调整表格和分页组件的样式。
结语
通过使用这个模板，你可以快速地为项目添加表格展示和搜索功能，大大提升开发效率。同时，模板的可复用性和可定制性也使得它能够适应不同的项目需求。
希望这个分享能够帮助到正在前端开发道路上的你，如果你有任何问题或建议，欢迎在评论区交流。让我们一起进步，创造更高效、更优雅的前端代码！
