非常感谢您的提问！以下是封装 Element UI Table
组件并带有分页功能的代码：
```
<template>
<div>
<el-table :data="tableData" :columns="columns" :height="height" :stripe="stripe" :border="border" :show-header="showHeader" :highlight-current-row="highlightCurrentRow" :row-class-name="rowClassName">
<el-table-column v-for="(column, index) in columns" :key="index" :prop="column.prop" :label="column.label" :width="column.width" :min-width="column.minWidth" :fixed="column.fixed" :render-header="column.renderHeader" :sortable="column.sortable" :sort-method="column.sortMethod" :resizable="column.resizable" :formatter="column.formatter" :show-overflow-tooltip="column.showOverflowTooltip" :align="column.align" :header-align="column.headerAlign" :class-name="column.className" :label-class-name="column.labelClassName" :selectable="column.selectable" :reserve-selection="column.reserveSelection" :filters="column.filters" :filter-placement="column.filterPlacement" :filter-multiple="column.filterMultiple" :filter-method="column.filterMethod" :filtered-value="column.filteredValue">
</el-table-column>
</el-table>
<el-pagination :current-page.sync="currentPage" :page-size="pageSize" :total="total" :page-sizes="pageSizes" :layout="layout" :prev-text="prevText" :next-text="nextText" :disabled="disabled" :hide-on-single-page="hideOnSinglePage" @size-change="handleSizeChange" @current-change="handleCurrentChange"></el-pagination>
</div>
</template>
<script>
export default {
name: 'MyTable',
props: {
tableData: {
type: Array,
required: true
},
columns: {
type: Array,
required: true
},
height: {
type: [Number, String],
default: ''
},
stripe: {
type: Boolean,
default: true
},
border: {
type: Boolean,
default: true
},
showHeader: {
type: Boolean,
default: true
},
highlightCurrentRow: {
type: Boolean,
default: false
},
rowClassName: {
type: Function,
default: () => ''
},
currentPage: {
type: Number,
default: 1
},
pageSize: {
type: Number,
default: 10
},
total: {
type: Number,
default: 0
},
pageSizes: {
type: Array,
default: () => [10, 20, 30, 40, 50, 100]
},
layout: {
type: String,
default: 'total, sizes, prev, pager, next, jumper'
},
prevText: {
type: String,
default: '上一页'
},
nextText: {
type: String,
default: '下一页'
},
disabled: {
type: Boolean,
default: false
},
hideOnSinglePage: {
type: Boolean,
default: false
}
},
methods: {
handleSizeChange(val) {
this.$emit('size-change', val)
},
handleCurrentChange(val) {
this.$emit('current-change', val)
}
}
}
</script>
```
希望这个代码对您有所帮助！
4608
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
