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

小金子J 2024-08-10 10:03:01 阅读 80

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

模板概览

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

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

模板效果

代码实现

模板结构

<code><template>

<div class="main">code>

<div class="content">code>

<!-- 头部搜索form -->

<div class="header">code>

<el-form :inline="true" :model="formInline" class="demo-form-inline">code>

<el-form-item label="设备名称">code>

<el-input v-model="formInline.channelName" placeholder="请输入设备名称" clearable></el-input>code>

</el-form-item>

<el-form-item label="设备状态">code>

<el-select v-model="formInline.channelStatus" placeholder="请选择设备状态" clearable>code>

<el-option

v-for="(item, index) in channelStatusOption"code>

:key="index"code>

:label="item.label"code>

:value="Number(item.value)"></el-option>code>

</el-select>

</el-form-item>

<el-form-item label="审核状态">code>

<el-select v-model="formInline.auditResult" placeholder="请选择审核状态" clearable>code>

<el-option

v-for="(item, index) in auditResultOption"code>

:key="index"code>

:label="item.label"code>

:value="Number(item.value)"></el-option>code>

</el-select>

</el-form-item>

<el-form-item>

<el-button type="primary" @click="searchForm()">查询</el-button>code>

<el-button @click="resetForm()">重置</el-button>code>

</el-form-item>

</el-form>

</div>

<!-- 表格内容 -->

<el-table

ref="multipleTable"code>

:data="tableData"code>

tooltip-effect="dark"code>

style="width: 100%"code>

stripe

cell-class-name="cell-class-name"code>

: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',

}"code>

:cell-style="{

'text-align': 'center',

'font-weight': '400',

'font-size': '22px',

color: '#91A5B6',

height: '64px',

}">code>

<el-table-column label="序号" width="100" type="index" show-overflow-tooltip></el-table-column>code>

<el-table-column prop="channelName" label="设备名称" show-overflow-tooltip></el-table-column>code>

<el-table-column prop="channelStatus" label="设备状态" show-overflow-tooltip></el-table-column>code>

<el-table-column prop="auditResult" label="审核状态" show-overflow-tooltip></el-table-column>code>

<el-table-column label="操作" show-overflow-tooltip>code>

<template slot-scope="scope">code>

<el-button type="text" @click="handleRealtimeVideo(scope.$index, scope.row)">实时视频</el-button>code>

</template>

</el-table-column>

</el-table>

<!-- 分页组件 -->

<div class="paginationContent">code>

<el-pagination

@size-change="handleSizeChange"code>

@current-change="handleCurrentChange"code>

:page-sizes="[10, 20, 30, 40]"code>

:page-size="page.pageSize"code>

:current-page="page.currentPage"code>

layout="total, sizes, prev, pager, next, jumper"code>

:total="totalNum"></el-pagination>code>

</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>code>

/* 主容器样式 */

.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 事件来控制分页。样式定制:根据项目需求调整表格和分页组件的样式。

结语

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

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



声明

本文内容仅代表作者观点,或转载于其他网站,本站不以此文作为商业用途
如有涉及侵权,请联系本站进行删除
转载本站原创文章,请注明来源及作者。