Eltable二次封装

封装

<template> <div> <el-table :data="tableData" border stripe :header-row-style="{ background: '#F1F6FF !important', color: '#3E445', fontWeight: '500', }" > <template v-for="(item, index) in column" > <el-table-column v-if="item.slot" :align="item.align" :label="item.label" :min-width="item.minWidth" :width="item.width" :fixed="item.fixed" > <template slot-scope="scope"> <slot :name="item.slot" :row="scope.row"></slot> </template> </el-table-column> <el-table-column v-else :align="item.align" :prop="item.prop" :label="item.label" :width="item.width" :min-width="item.minWidth" ></el-table-column> </template> </el-table> <el-pagination v-if="total" background layout="total, sizes, prev, pager, next" :page-sizes="pageSizes" :page-size="pageSize" :current-page="currentPage" :total="total" class="fyDiv" @size-change="handleSize" @current-change="handlePage" ></el-pagination> </div> </template> <script> export default { props: { tableData: { type: Array, default: () => [] }, column: { type: Array, default: () => [] }, total: { type: Number, default: () => 0 }, pageSizes: { type: Array, default: () => [10, 20, 30, 40], }, pageSize: { type: Number, default: () => 10 }, currentPage: { type: Number, default: () => 1 }, }, data() { return { } }, methods: { handleSize(){ this.$emit('handleSize') }, handlePage(){ this.$emit('handlePage') }, } } </script> <style lang="scss" scoped> ::v-deep .el-table__cell{ min-height: 46px; } </style>

使用

<TablePage :column="column" :tableData="customerTable" > <template #level="scope"> {{ scope.row.level | CustomerLevelType }} </template> <template #stage="scope"> {{ scope.row.stage | CustomerStageType }} </template> <template #type="scope"> {{ scope.row.type | CustomerStageType }} </template> <template #action="scope"> <el-link type="primary" :underline="false" @click="openCustomer('edit',scope.row)" style="">按钮</el-link> <el-link type="primary" :underline="false" @click="openDetails(scope.row.id)">按钮</el-link> </template> </TablePage>

数据格式

column: [ { label: '客户ID', prop: 'number', minWidth: 150, },{ label: '客户名称', slot: 'name', minWidth: 180, },{ label: '客户级别', prop: 'levelStr', minWidth: 100, },{ label: 'POI名称', slot: 'poiName', minWidth: 150, } ]