前言
在后台管理项目中，用到最多的就是表格了，当然也少不了查询、分页、等一些特殊数据的展示。
既然这些功能是比较常见且常用的，那么将它们封装成组件来复用，能节省不的事情。
接下来我们就来封装一个，具有表格、查询、分页、等多种功能的组件
效果展示
代码实现
接下来，我们就来一步一步的实现吧。
首先我们的组件需要一个配置文件
1、配置表格需要展示的字段
2、配置查询条件
详细的解释，都写在注释中。
我们这里就命名为table.ts
/*
首先是我们的 表格的配置（数组对象）
每个对象中有三个必须的属性
prop:对应的字段名称
label:表格表头展示名称
width/min_width:列宽（width和min_width自选其一）（width就是固定款度，min_width最小宽度）
扩展属性
align:列的对齐方式（left、center、right）默认left
isEdit:（默认false，为true时开始单元格双击编辑功能）
type:（列展示格式）具体看以下举例
show:控制列的显示或隐藏(这里不需要单独写出来，在组件里会自己去添加)
type:time（后端返回的字段为时间戳，需要我们自己格式化时间）
{
prop: 'createDate',
label: ' 创建时间',
align: 'center',
type: 'time',
width: 180
}
type:image（改字段需要以图片的形式展示）
{
prop: 'avatar',
label: '头像',
align: 'center',
type: 'image',
width: 80
},
type:switch（switch开关，一般用于控制该条数据的状态）
{
prop: 'userStatus',
label: '用户状态',
align: 'center',
type: 'switch',
activeValue: 1, // switch为打开时的值
inactiveValue: 2,// switch为关闭时的值
width: 100
},
type:status（状态展示，比如这时候后端返回的状态对应的值时1或者是2，肯定是需要转为中文展示的）
{
prop: 'userStatus',
label: '用户状态',
align: 'center',
width: 100,
type: 'status',
option: {
'1': '启用',
'2': '禁用',
},
color: {
'1': 'success',
'2': 'info',
}
}
以上就是表格配置信息
*/
const columnsData: any = [
{
prop: 'menuPowerName',
label: '菜单权限名称',
isEdit: true,
min_width: 120,
},
{
prop: 'menuPowerMark',
label: '菜单权限标识',
align: 'center',
width: 180,
},
{
prop: 'menuName',
label: '所属菜单名称',
align: 'center',
width: 180,
},
{
prop: 'createDate',
label: ' 创建时间',
align: 'center',
type: 'time',
width: 180
}
]
// 表格查询配置中 type:select 的测试数据
let dataList = [
{
"id": 1,
"menuName": "首页",
"menuPath": "/",
"menuType": 2,
"menuStatus": 1,
"parentId": 0,
"parentName": null,
"createDate": 1682435267868
},
{
"id": 2,
"menuName": "系统管理",
"menuPath": "/system",
"menuType": 1,
"menuStatus": 1,
"parentId": 0,
"parentName": null,
"createDate": 1682435338368
},
{
"id": 3,
"menuName": "用户管理",
"menuPath": "user",
"menuType": 2,
"menuStatus": 1,
"parentId": 2,
"parentName": "系统管理",
"createDate": 1682436009335
},
{
"id": 4,
"menuName": "角色管理",
"menuPath": "role",
"menuType": 2,
"menuStatus": 1,
"parentId": 2,
"parentName": "系统管理",
"createDate": 1682436073984
},
{
"id": 5,
"menuName": "菜单管理",
"menuPath": "menu",
"menuType": 2,
"menuStatus": 1,
"parentId": 2,
"parentName": "系统管理",
"createDate": 1682471621692
}
]
/*
接下来我们来说一下查询的配置
我们查询时传给后端的数据大多是是这样的
{
name:'张三,
age:1
}
下面我只配置了三种情况
text 就是用户数据关键字查询
select 是用户选择指定数据查询
dateTime 根据时间查询
text 和 dateTime 没什么可说的，重要的是select
我们之间来解析一条
{ label: "所属菜单", prop: 'menuId', type: 'select', options: dataList, valueKey: 'id', labelKey: 'menuName' },
label 对应的是我们的名称
prop 对应的则是字段
type 类型就不说了，上面说了，目前就三种
options：（数组对象）上面我会贴出测试数据
我们这个查询是作用在select下拉菜单上的，且每次数组对象中的数据都是不同的，我们就需要两个变量去存对应的字段
valueKey:select选择的值
labelKey:select选择值对应的名称
*/
const queryData: any = [
{ label: "权限名称", prop: 'menuPowerName', type: 'text' },
{ label: "所属菜单", prop: 'menuId', type: 'select', options: dataList, valueKey: 'id', labelKey: 'menuName' },
{ label: "创建时间", prop: 'dateTime', type: 'date' },
]
export {
columnsData,
queryData
}
下面就来实现对整个组件的封装
注释依旧在代码中
components下命名为TableModule.vue
<template>
<div class="table-module">
<!-- 查询 -->
<!--
实现：通过我们配置好的 查询条件
首先去创建form表单，根据我们配置的查询条件去做一个循环判断，展示出不用类型所对应不同的输入框
比如：text对应普通的输入框，select对应下拉选择，dateTime对应日期时间选择器
在使用时，父组件会传来一个queryForm空的对象，
循环出来的输入框会绑定表格配置中的prop字段绑定在queryForm对象中
-->
<div class="query" ref="queryRef">
<div class="query-content">
<el-form :model="props.tableModule.queryForm" style="display: flex;" label-position="left"
class="query-form">
<el-form-item :label="item.label" style="margin-right: 20px; margin-bottom: 0px;"
v-for="item in props.tableModule.query" :key="item.prop">
<el-input v-model="props.tableModule.queryForm[item.prop]" :placeholder="'输入' + item.label + '关键字'"
clearable v-if="item.type == 'text'"></el-input>
<el-select v-model="props.tableModule.queryForm[item.prop]" clearable
:placeholder="'选择' + item.label + '关键字'" v-else-if="item.type == 'select'">
<el-option v-for="cItem in item.options" :key="cItem[item.valueKey]"
:label="cItem[item.labelKey]" :value="cItem[item.valueKey]" />
</el-select>
<el-date-picker v-model="props.tableModule.queryForm[item.prop]" clearable type="datetimerange"
format="YYYY/MM/DD hh:mm:ss" value-format="x" range-separator="至" start-placeholder="开始时间"
end-placeholder="结束时间" v-else-if="item.type == 'date'" />
</el-form-item>
</el-form>
</div>
<div class="slot">
<el-button @click="Search" type="primary" plain>查询</el-button>
<el-button @click="Recover">重置</el-button>
<!-- slot插槽（用来添加表格其他操作，比如，新增数据，删除数据等其他操作） -->
<slot name="event"></slot>
<!--
动态表头显示，根据表格每条配置项中的show字段来决定改列是否显示或者隐藏
columns 就是我们表格配置的数组对象
-->
<el-popover placement="bottom" title="表格配置" :width="200" trigger="click">
<div v-for="(item, index) in props.tableModule.columns" :key="index">
<el-checkbox v-model="item.show" :label="item.label" :true-label="1" :false-label="0" />
</div>
<template #reference>
<!-- 一个Element Plus中的图标 -->
<el-button :icon="Operation"></el-button>
</template>
</el-popover>
</div>
</div>
<!-- 表格 -->
<!-- style中是计算表格的高度的 -->
<el-table :data="props.tableModule.dataList" border height="100%"
:style="{ 'height': `calc(100vh - ${queryHeight + 156}px)` }" v-loading="props.tableModule.loading"
:row-class-name="tableRowClassName" :cell-class-name="tableCellClassName" @cell-dblclick="cellDblClick"
id="el-table" ref="tableRef">
<el-table-column type="selection" width="50" align="center" />
<!-- columns表格配置数据 -->
<template v-for="(item, index) in props.tableModule.columns">
<!-- 循环 columns 紧接着判断每个字段的类型 -->
<el-table-column :prop="item.prop" :label="item.label" :align="item.align || 'left'" :width="item.width"
:min-width="item.min_width" :fixed="item.fixed" v-if="item.show">
<template slot-scope="scope" #default="scope">
<!-- switch时使用switch开关组件，并且绑定好我们配置的属性 -->
<div v-if="item.type == 'switch'">
<el-switch v-model="scope.row[item.prop]" :active-value="item.activeValue"
:inactive-value="item.inactiveValue" @change="props.tableModule.switchChange(scope.row)">
</el-switch>
</div>
<!-- status 时 使用fieldChange方法匹配出值对应的名称并返回 -->
<div v-else-if="item.type == 'status'">
<el-tag>{{
fieldChange(scope.row[item.prop], item.option) }}</el-tag>
</div>
<!-- image 就是使用 el-image展示我们的图片咯 -->
<div v-else-if="item.type == 'image'">
<el-image style="width: 60px; height: 60px" :src="scope.row[item.prop]"
:preview-src-list="[scope.row[item.prop]]" :preview-teleported="true">
</el-image>
</div>
<!-- formatDate 方法将时间戳格式化为年月日时分秒的格式 -->
<div v-else-if="item.type == 'time'">{{ formatDate(scope.row[item.prop]) }}</div>
<!-- 可编辑单元格 -->
<div v-else-if="item.isEdit">
<el-input v-model="scope.row[item.prop]" :placeholder="'请输入' + item.label"
@blur="inputBlur(scope.row)" autofocus ref="inputRef"
v-if="scope.row['Indexs'] == rowIndex && scope.column['Indexs'] == columnIndex" />
<div v-else>{{ scope.row[item.prop] }}</div>
</div>
<!-- 类型都不匹配时直接展示 -->
<div v-else>{{ scope.row[item.prop] }}</div>
</template>
</el-table-column>
</template>
<!-- 这里的插槽用于列表的操作列 -->
<slot name="tableColumn"></slot>
</el-table>
<!-- 分页 -->
<!-- 分页这里没什么可说的，父组件传三个参数，当前页，每页条数，总条数就可以了。 -->
<div class="page">
<el-pagination :current-page="props.tableModule.pages.page" :page-size.sync="props.tableModule.pages.limit"
:page-sizes="pageSizes" :layout="layout" :total="props.tableModule.pages.total" @size-change="sizeChange"
@current-change="currentChange" />
</div>
</div>
</template>
<script setup>
import { defineProps, onMounted, reactive, toRefs, ref } from 'vue'
import { formatDate } from '@/utils/index' // 自己的格式化时间的方法
import { ElTable } from 'element-plus';
import { Operation } from '@element-plus/icons-vue'
const props = defineProps({
tableModule: Object, // 由父组件传递而来
layout: { // 分页功能配置
type: String,
default: "total, sizes, prev, pager, next, jumper",
},
pageSizes: { // 分页：每页条数配置
type: Array,
default() {
return [10, 20, 30, 50];
},
},
})
const state = reactive({
rowIndex: 0, // 行索引 用于可编辑单元格
columnIndex: 0, // 列索引 用于可编辑单元格
queryHeight: 0,
})
const {
rowIndex,
columnIndex,
queryHeight,
} = toRefs(state)
const queryRef = ref(null);
onMounted(() => {
// 这里拿到query模块的高度，适配页面高度的
setTimeout(() => {
state.queryHeight = queryRef.value.clientHeight
}, 100);
// 为每个表格配置项添加show属性，默认1为显示状态
props.tableModule.columns.forEach(item => {
item.show = 1
})
})
function fieldChange(row, option) {
if (option[row]) {
return option[row]
}
}
// 编辑单元格 ----------
// 为每一行返回固定的className
function tableRowClassName({ row, rowIndex }) {
row.Indexs = rowIndex;
}
// 为所有单元格设置一个固定的 className
function tableCellClassName({ column, columnIndex }) {
column.Indexs = columnIndex;
}
// el-table单元格双击事件
function cellDblClick(row, column, cell, event) {
state.rowIndex = row.Indexs
state.columnIndex = column.Indexs
}
// input失去焦点
function inputBlur(row) {
state.rowIndex = 0
state.columnIndex = 0
props.tableModule.editInputBlur() // 父组件的方法，
}
// 每页条数切换时触发
function sizeChange(item) {
props.tableModule.pages.limit = item
props.tableModule.callback() // 父组件绑定的回调
}
// 页数切换时触发
function currentChange(item) {
props.tableModule.pages.page = item
props.tableModule.callback()
}
// 点击查询按钮时触发
function Search() {
props.tableModule.callback()
}
// 点击重制触发
function Recover() {
props.tableModule.queryForm = {}
props.tableModule.callback()
}
</script>
<style scoped lang="scss">
.table-module {
.query {
display: flex;
align-items: flex-start;
justify-content: space-between;
margin-bottom: 10px;
.query-content {
display: flex;
align-items: flex-start;
.query-form {
.el-form-item {
margin: 0px;
margin-right: 20px;
}
.el-input {
width: 200px;
}
::v-deep(.el-select) {
.el-input {
width: 200px;
}
}
}
}
.slot {
display: flex;
justify-content: flex-end;
padding-right: 48px;
}
}
.page {
margin-top: 10px;
}
}
</style>
接下来就到我们组件的使用了。
index.vue
<template>
<div class="">
<!-- TableModule tableModule是一个对象，下面有解释 -->
<TableModule :tableModule="tableModule" ref="TableModuleRef">
<!-- #event是插入的新增按钮和删除按钮，具体操作按照自己的业务流程实现 -->
<template #event>
<el-button type="primary" @click="Add">新增</el-button>
<el-button type="danger" @click="Delete">删除</el-button>
</template>
<!-- #tableColumn 插入表格的操作列 -->
<template #tableColumn>
<el-table-column align="center" fixed="right" label="操作" width="120">
<template slot-scope="scope" #default="scope">
<el-button @click="Edit(scope)">编辑</el-button>
</template>
</el-table-column>
</template>
</TableModule>
</div>
</template>
<script setup lang="ts">
import { reactive, toRefs, ref, onMounted } from 'vue'
import { columnsData, queryData } from './table' // 引入我们配置好的数据
import { menuPowerList } from '@/api/menuPower/index'
const state = reactive({
columns: columnsData, // 表格配置
query: queryData, // 查询条件配置
queryForm: {}, // 查询form表单
loading: false, // 加载状态
dataList: [], // 列表数据
pages: { // 分页数据
total: 0,
limit: 20,
page: 1,
}
})
const { loading, dataList, columns, pages, query, queryForm } = toRefs(state)
const TableModuleRef = ref()
onMounted(() => {
getDataList()
})
// 传给子组件的
const tableModule = ref<Object>({
editInputBlur: editInputBlur, // 可编辑单元的，失去焦点时的回调
callback: getDataList, // 回调，子组件中可以看到很多调用callback的，这里对应的是获取列表数据的方法
// 以下不说了，上面都给解释了
queryForm: queryForm,
columns: columns,
dataList: dataList,
loading: loading,
pages: pages,
query: query,
})
// 获取列表信息
async function getDataList() {
state.loading = true
// 掉自己的接口，切勿复制粘贴
const res = await menuPowerList({ pages: state.pages, query: state.queryForm })
state.loading = false
state.dataList = res.data
state.pages.total = res.total
}
function Add() { // 新增事件
}
function Edit(row: any) { // 编辑事件
console.log(row)
}
function Delete() { // 删除事件
}
function editInputBlur() {
console.log('失去焦点回调')
}
</script>
<style scoped></style>
结尾
之前几个功能模块都有单独封装过，下面我会贴出链接
Element Plus二次封装el-table、可编辑表格
835
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
