element-plus 表格简单封装
最近用element-plus写前端，发现表格、分页、检索等多组件都是分离的，每次都要自己去合并，所以根据应用场景自己封了一个小组件，直接上代码：
<template>
<div class="oa-table-area">
<el-table
:data="tableShowData"
style="width: 100%"
:tableLayout="tableLayout"
>
<template v-for="column in columnName" :key="column.prop">
<el-table-column :prop="column.prop" :label="column.label"
:width="column.len"/>
template>
<el-table-column label="操作" width="350" v-if="buttonConfig.show">
<template v-slot="scope">
<el-row >
<template v-for="btn in buttonConfig.buttons" :key="btn.label">
<el-col :span="8" v-if="btn.show(scope.row.releaseStatus)">
<el-button
:icon="btn.icon"
:type="btn.type" @click="handle(scope.row, btn.method, btn.paramKey, btn.emitKey)"
>{{ btn.label}}el-button>
el-col>
template>
el-row>
template>
el-table-column>
el-table>
div>
<el-row justify="center" style="top: 4px">
<el-col :span="8" >
<div class="grid-content bg-purple-dark"/>
<el-pagination background
layout="sizes, prev, pager, next"
:total="total"
:page-size="pageSize"
v-model="currentPage"
:page-sizes="[10, 15, 20, 25, 30, 35, 40]"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
el-col>
el-row>
template>
<script>
import oaTable from "./oaTable"
export default oaTable
script>
<style scoped>
.oa-table-area{
width: 100%;
height: 93% !important;
overflow-y: auto;
}
style>
import {ref, watch} from "vue";
export default {
name: "OaTable",
emits: ["browse", "edit", "delete", "seeStatus"],
props: {
tableData: Array,
columnName: Array,
buttonConfig: {
show: Boolean,
emitConfig: Boolean,
buttons: Array
}
},
setup(props, context) {
const tableLayout = ref('fixed')
const currentPage = ref(1)
const total = ref(0)
const pageSize = ref(15)
const tableShowData = ref(null)
watch(props, newValue => {
total.value = props.tableData.length
tableShowData.value = newValue.tableData.slice(pageSize.value * (currentPage.value - 1), pageSize.value * currentPage.value)
}, {immediate: true, deep: true})
watch(pageSize, newValue => {
tableShowData.value = props.tableData.slice(newValue * (currentPage.value - 1), newValue * currentPage.value)
}, {immediate: true})
watch(currentPage, newValue => {
tableShowData.value = props.tableData.slice(pageSize.value * (newValue - 1), pageSize.value * newValue)
}, {immediate: true})
const handleSizeChange = value => {
pageSize.value = value
//更换样式，从头显示
currentPage.value = 1
}
const handleCurrentChange = value => {
currentPage.value = value
}
/**
* 方法处理
* @param row
* @param method
* @param paramKey
* @param emitKey
*/
const handle = (row, method, paramKey, emitKey) => {
if (props.buttonConfig.emitConfig === true) {
if (emitKey == null && emitKey === undefined && emitKey === "") {
console.error("自定义方法关键字错误")
return null
}
const params = []
if (paramKey !== null && paramKey !== undefined && paramKey.length > 0) {
for (let r in row) {
for (let p of paramKey) {
if (r === p) {
params.push(row[r])
break
}
}
}
}
if (method !== null && method !== undefined) {
if (params.length === 0) {
method()
} else {
method(...params)
}
}
context.emit(emitKey, params)
} else {
if (paramKey !== null && paramKey !== undefined && paramKey.length > 0) {
const params = []
for (let r in row) {
for (let p of paramKey) {
if (r === p) {
params.push(row[r])
break
}
}
}
method(...params)
} else {
method()
}
}
}
return {
tableShowData, currentPage, total, pageSize, tableLayout,
handleSizeChange, handleCurrentChange, handle
}
}
}
调用：
剧本：
/*列表数据*/
const tableData = ref([])
/*显示列表内容*/
const columns = ref([
{prop: "noticeTitle", label: "公告标题", len: 350},
{prop: "noticeType", label: "公告类型"},
{prop: "createTime", label: "创建时间"},
{prop: "readNum", label: "已阅人数"},
{prop: "noReadNum", label: "未阅人数"},
])
/*按钮配置*/
const buttonConfig = ref({
//是否显示按钮
show: true,
//自定义方法配置, 如果使用自定义方法，最好不要（不是不能）再传buttons中method，直接在调用的方法中全部处理
emitConfig: true,
buttons: [
{
//按钮名称
label: "查看",
//按钮图标，element提供的icon或者svg
icon: markRaw(View),
//显示条件，针对有选择显示的选项按钮
show: markRaw(() => true),
//按钮样式
type: "",
//绑定的click方法
//method: markRaw((id) => {console.log(id)} ),
//设置emit
emitKey: "browse",
//绑定方法需要的参数key，必须是表格数据的关键字, 且顺序与上面方法参数一致
paramKey: ["id"]
}, {
//按钮名称
label: "编辑",
//按钮图标，element提供的icon或者svg
icon: markRaw(Edit),
//显示条件，针对有选择显示的选项按钮
show: markRaw(releaseStatus => releaseStatus === '0'),
//按钮样式
type: "success",
//绑定的click方法
//method: markRaw((id) => {console.log(id)} ),
//设置emit
emitKey: "edit",
//绑定方法需要的参数key，必须是表格数据的关键字, 且顺序与上面方法参数一致
paramKey: ["id"],
}, {
//按钮名称
label: "查阅",
//按钮图标，element提供的icon或者svg
icon: markRaw(Search),
//显示条件，针对有选择显示的选项按钮
show: markRaw(releaseStatus => releaseStatus !== '0'),
//按钮样式
type: "success",
//绑定的click方法
//method: markRaw((id) => {console.log(id)} ),
//设置emit
emitKey: "seeStatus",
//绑定方法需要的参数key，必须是表格数据的关键字, 且顺序与上面方法参数一致
paramKey: ["id"],
}, {
//按钮名称
label: "删除",
//按钮图标，element提供的icon或者svg
icon: markRaw(Delete),
//显示条件，针对有选择显示的选项按钮
show: markRaw(() => true),
//按钮样式
type: "danger",
//绑定的click方法
//method: markRaw((id) => {console.log(id)} ),
//设置emit
emitKey: "delete",
//绑定方法需要的参数key，必须是表格数据的关键字, 且顺序与上面方法参数一致
paramKey: ["id"],
}
]
})
模板
<OaTable :tableData="tableData" :columnName="columns" :buttonConfig="buttonConfig" @browse="browseNotice"/>