好的,我来为您介绍一下如何在
Vue3项目中结合
Element Plus和TypeScript来封装一个
带有
分页功能的表格
组件。
首先,我们需要创建一个新的
Vue组件,比如叫做TableWithPagination
.vue。
在
组件的模板部分,我们可以这样写:
```
vue
<template>
<div>
<el-table :data="tableData" style="width: 100%">
<el-table-column v-for="column in columns" :key="column
.prop" :prop="column
.prop" :label="column
.label" />
</el-table>
<el-pagination
@current-change="handlePageChange"
:current-page="currentPage"
:page-size="pageSize"
layout="total, prev, pager, next, jumper"
:total="total"
/>
</div>
</template>
```
在脚本部分,我们需要这样写:
```
vue
<script lang="ts" setup>
import { ref, computed } from &#
39;
vue&#
39;;
import { ElTable, ElTableColumn, ElPagination } from &#
39;
element-
plus&#
39;;
interface Column {
prop: string;
label: string;
}
interface Props {
data: any[];
columns: Column[];
pageSize?: number;
}
const props = withDefaults(defineProps<Props>(), {
pageSize: 10,
});
const tableData = computed(() => {
const start = (props
.currentPage - 1) * props
.pageSize;
return props
.data
.slice(start, start
+ props
.pageSize);
});
const total = computed(() => props
.data
.length);
const currentPage = ref(1);
const handlePageChange = (page: number) => {
currentPage
.value = page;
};
</script>
```
在样式部分,我们可以根据需要添加一些样式:
```
vue
<style scoped>
/* 添加一些自定义样式 */
</style>
```
这个
组件接收三个主要属性:
1
. data: 表格数据数组
2
. columns: 表格列配置数组
3. pageSize: 每页显示的数据条数(可选,默认为10)
组件内部使用 computed 计算属性来计算当前页需要显示的数据
和总数据量。使用 ref 定义当前页码,并提供一个 handlePageChange 方法来处理页码变化。
使用这个
组件时,我们可以这样写:
```
vue
<template>
<TableWithPagination :data="tableData" :columns="columns" />
</template>
<script lang="ts" setup>
import TableWithPagination from &#
39;
./components/TableWithPagination
.vue&#
39;;
const tableData = ref([
...]);
const columns = ref([
...]);
</script>
```
这样,我们就完成了一个简单的
Vue3 + Element Plus + TypeScript的表格
分页组件封装。
超级会员免费看
本文介绍了如何使用Vue3和Element Plus库创建一个具有按钮和查询功能的分页列表组件。包括组件的完整代码展示和实际应用示例。
订阅专栏 解锁全文
扫一扫
1789
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
