最近做了一个后台的项目,需要用到大量的表格组件,我就试着把它给封装了一下,记录一下,那么现在开始了。
父页面代码:
<!-- 这里可以使用插槽 -->
<tableData ref="refTable" :config="table_config">
<template #buts>
<el-button type="primary" @click="addCost">添加车辆</el-button>
</template>
<template #operate="{ row }">
<el-button link type="primary" size="small" @click="hDetail(row)">查看</el-button>
<el-button link type="primary" size="small" @click="hDel(row.id)">删除</el-button>
</template>
</tableData>
const table_config = ref({
thead: [
{
label: '车牌号码', prop: "carNumber"
},
{
label: '收费类型', prop: "chargeType",type: 'payment',
callback: (row, prop) => {
return charge_type[row[prop]]
}
},
{
label: '停车总时长', prop: "parkingTime"
},
{
label: '缴纳费用(元)', prop: "actualCharge"
},
{
label: '缴纳状态', prop: "paymentStatus", type: 'payment',
callback: (row, prop) => {
return payment_status[row[prop]]
}
},
{
label: '缴纳方式', prop: "paymentMethod", type: 'payment',
callback: (row, prop) => {
return payment_method[row[prop]]||'--'
}
},
{
label: '缴纳时间', prop: "paymentTime"
},
],
// 是否显示二级table
dropDown: false,
// 是否显示序号
// num:false,
// 多选
select: false,
url: '/parking/payment/list',
params: {
}
})
组件代码:
<template>
<div class="editEnterprise">
<!-- 添加或删除 -->
<slot name="buts" :row="ids"></slot>
<el-table :row-key="row => row.id" @selection-change="handleSelectionChange" :data="table_data" :border="false"
style="width: 100%">
<!-- 是否显示二级table -->
<slot v-if="table_config.dropDown" name="expand" :row="{ row }">
<!-- 插槽 -->
</slot>
<!-- 是否显示多选 -->
<el-table-column reserve-selection v-if="table_config.select" type="selection" width="55" />
<!-- 是否显示序号 -->
<el-table-column v-if="true" label="序号" :index="1" type="index" width="70"></el-table-column>
<!-- 状态项 -->
<template v-for="item in table_config.thead" :key="item.prop">
<el-table-column v-if="type.includes(item.type)" :label="item.label" :prop="item.prop">
<template #default="{ row }"><span>{{ item.callback && item.callback(row, item.prop)
}}</span></template>
</el-table-column>
<!-- 正常显示 -->
<el-table-column v-else :label="item.label" :prop="item.prop" />
</template>
<!-- 操作列 -->
<el-table-column v-if="table_config.isoperate" fixed="right" label="操作">
<template v-slot="{ row }">
<slot name="operate" :row="row" />
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<el-col :offset="14">
<el-pagination v-model:current-page="table_config.page" v-model:page-size="table_config.pageSize"
:page-sizes="[1, 2, 10, 20, 50, 100]" :small="small" :disabled="disabled" :background="background"
layout="total, prev, pager, next, sizes, jumper" :total="table_config.total"
@size-change="handleSizeChange" @current-change="handleCurrentChange" /></el-col>
</div>
</template>
<script setup>
name: 'tableData'
import { watch, ref, onMounted } from 'vue'
import { getTableData } from '@/api/common'
const type = ['card', 'building', 'payment', 'charging', 'duration', 'pole', 'working', 'handle', 'staff']
// 数据-------------------------------------------
const table_data = ref([])
const table_config = ref({
thead: [],
dropDown: true,
num: true,
select: true,
isoperate: true,
url: '',
total: 0,
page: 1,
pageSize: 10,
params: {}
})
const ids = ref([]);
// 传入配置
const props = defineProps({
config: {
type: Object,
default: () => { }
},
})
// 方法--------------------------------------------
// 当前页数改变
const handleCurrentChange = (val) => {
table_config.value.page = val
loadData()
// console.log(val);
}
// 每页显示个数改变
const handleSizeChange = (pageSizes) => {
table_config.value.pageSize = pageSizes
table_config.value.page = 1
loadData()
// console.log(pageSizes);
}
// 表格多选获取选中的数据
const handleSelectionChange = (selection) => {
ids.value = selection.map(row => row.id).join(',');
console.log(ids.value);
};
// 初始化数据
const initConfig = () => {
for (let key in props.config) {
if (Object.keys(table_config.value).includes(key)) {
table_config.value[key] = props.config[key]
}
}
console.log('有数据了', table_config.value.params);
// 配置项配置完成后读取数据
loadData()
}
const loadData = () => {
let requestData = {
url: table_config.value.url,
data: {
page: table_config.value.page,
pageSize: table_config.value.pageSize,
total: table_config.value.total,
...table_config.value.params
}
}
getTableData(requestData).then(({ data }) => {
console.log(data)
if (data) { table_data.value = data.rows, table_config.value.total = data.total }
})
}
defineExpose({ initConfig })
// onMounted(() => { })
// 监听器
watch(props.config, () => {
initConfig()
}, { immediate: true, deep: true })
</script>
<style lang="scss" scoped>
.editEnterprise {
margin: 15px 0px;
}
// button样式
.editEnterprise {
margin: 15px 0;
}
// 分页样式穿透
:deep(.el-pagination) {
padding: 10px 0;
}
</style>
效果:这里分页也在组件处理了,所以也无需自己在弄分页了
![image.png](https://img-blog.csdnimg.cn/img_convert/fdd38f61d71562db6bf7c39e95d0b5f3.png#averageHue=#fefefe&clientId=u7d0fcacc-c0bd-4&from=paste&height=576&id=u15f84af6&originHeight=720&originWidth=1612&originalType=binary&ratio=1.25&rotation=0&showTitle=false&size=76492&status=done&style=none&taskId=u216d8a14-8a63-4b6d-8636-18112bb4e32&title=&width=1289.6)
这里取了个巧,因为后台接口要传的必传参几乎一样而且都是GET请求,我就把请求也直接页封装在组件里了,只需要传一个请求地址就可以正常渲染,项目的批量删除也在组件内部处理了,且表单数据也可以直接传入到组件的params属性,这样查询时也可以动态更新数据,封装的不是那么的全面,欢迎各位路过的大佬们给出指点和建议,互相学习进步!