在Vue 2项目中，你可以使用JSX和template两种方式来封装el-table和el-pagination。以下是一个简单的示例，展示了如何封装这两个组件。
首先，确保你已经安装了Element UI并在你的项目中引入了它。
使用JSX封装
// MyTable.js
import { h, Fragment } from 'vue';
import { ElTable, ElTableColumn, ElPagination } from 'element-plus';
export default {
name: 'MyTable',
props: {
data: Array,
columns: Array,
currentPage: Number,
pageSize: Number,
total: Number,
},
render() {
const { data, columns, currentPage, pageSize, total } = this;
return (
<Fragment>
<ElTable data={data} style="width: 100%">
{columns.map(column => (
<ElTableColumn {...column} />
))}
</ElTable>
<ElPagination
currentPage={currentPage}
pageSize={pageSize}
total={total}
onCurrentChange={this.handlePageChange}
/>
</Fragment>
);
},
methods: {
handlePageChange(newPage) {
this.$emit('page-change', newPage);
},
},
};使用template封装
<template>
<div>
<el-table :data="data" style="width: 100%">
<el-table-column
v-for="column in columns"
:key="column.prop"
:prop="column.prop"
:label="column.label"
></el-table-column>
</el-table>
<el-pagination
:current-page.sync="currentPage"
:page-size="pageSize"
:total="total"
@current-change="handlePageChange"
></el-pagination>
</div>
</template>
<script>
export default {
name: 'MyTable',
props: {
data: Array,
columns: Array,
currentPage: Number,
pageSize: Number,
total: Number,
},
methods: {
handlePageChange(newPage) {
this.$emit('update:currentPage', newPage);
this.$emit('page-change', newPage);
},
},
};
</script>在上述两个例子中，我们创建了一个名为MyTable的组件，它接收data、columns、currentPage、pageSize和total作为props，并且能够更新当前页面和处理页面改变的事件。在JSX示例中，我们使用了React-like的JSX语法来渲染组件，而在template示例中，我们使用了Vue标准的template语法。你可以根据自己的喜好选择使用哪种方式来封装你的组件。