一、创建通用型表格的需求
实现一个通用型表格组件,具备以下功能:
- 动态列配置。
- 分页功能。
- 排序功能。
- 可扩展的行操作功能。
二、设计通用型表格组件
首先,需要设计一个基础的表格组件,它接受列配置、数据和分页信息等参数。
1. 创建 useTable
Hook
在 src/hooks
目录下创建 useTable.js
文件:
import { ref, reactive, onMounted, toRefs } from 'vue';
export function useTable(fetchData) {
const state = reactive({
loading: false,
data: [],
pagination: {
currentPage: 1,
pageSize: 10,
total: 0,
},
sort: {
field: '',
order: '',
},
});
const loadData = async () => {
state.loading = true;
const { currentPage, pageSize } = state.pagination;
const { field, order } = state.sort;
const result = await fetchData(currentPage, pageSize, field, order);
state.data = result.data;
state.pagination.total = result.total;
state.loading = false;
};
const changePage = (page) => {
state.pagination.currentPage = page;
loadData();
};
const changePageSize = (size) => {
state.pagination.pageSize = size;
loadData();
};
const changeSort = (field, order) => {
state.sort.field = field;
state.sort.order = order;
loadData();
};
onMounted(() => {
loadData();
});
return {
...toRefs(state),
loadData,
changePage,
changePageSize,
changeSort,
};
}
2. 创建 TableComponent.vue
在 src/components
目录下创建 TableComponent.vue
文件:
<template>
<div>
<table>
<thead>
<tr>
<th v-for="col in columns" :key="col.key" @click="changeSort(col.key)">
{{ col.title }}
<span v-if="sort.field === col.key">{{ sort.order === 'asc' ? '↑' : '↓' }}</span>
</th>
</tr>
</thead>
<tbody>
<tr v-for="row in data" :key="row.id">
<td v-for="col in columns" :key="col.key">{{ row[col.key] }}</td>
</tr>
</tbody>
</table>
<div class="pagination">
<button @click="changePage(pagination.currentPage - 1)" :disabled="pagination.currentPage === 1">Previous</button>
<span>{{ pagination.currentPage }} / {{ Math.ceil(pagination.total / pagination.pageSize) }}</span>
<button @click="changePage(pagination.currentPage + 1)" :disabled="pagination.currentPage === Math.ceil(pagination.total / pagination.pageSize)">Next</button>
</div>
</div>
</template>
<script>
import { ref, onMounted } from 'vue';
import { useTable } from '@/hooks/useTable';
export default {
props: {
fetchData: {
type: Function,
required: true,
},
columns: {
type: Array,
required: true,
},
},
setup(props) {
const { data, loading, pagination, sort, loadData, changePage, changePageSize, changeSort } = useTable(props.fetchData);
return {
data,
loading,
pagination,
sort,
loadData,
changePage,
changePageSize,
changeSort,
};
},
};
</script>
<style scoped>
.pagination {
display: flex;
justify-content: center;
margin-top: 10px;
}
</style>
三、使用通用型表格组件
在实际项目中,可以这样使用这个通用型表格组件:
1. 创建 ExampleTable.vue
组件
在 src/views
目录下创建 ExampleTable.vue
文件:
<template>
<div>
<TableComponent :fetchData="fetchData" :columns="columns" />
</div>
</template>
<script>
import TableComponent from '@/components/TableComponent.vue';
export default {
components: {
TableComponent,
},
setup() {
const columns = [
{ key: 'name', title: 'Name' },
{ key: 'age', title: 'Age' },
{ key: 'email', title: 'Email' },
];
const fetchData = async (page, pageSize, sortField, sortOrder) => {
// 模拟数据获取
const total = 100;
const data = Array.from({ length: pageSize }, (v, i) => ({
id: (page - 1) * pageSize + i + 1,
name: `Name ${(page - 1) * pageSize + i + 1}`,
age: 20 + ((page - 1) * pageSize + i + 1) % 30,
email: `user${(page - 1) * pageSize + i + 1}@example.com`,
}));
return { data, total };
};
return {
columns,
fetchData,
};
},
};
</script>
四、解释代码
-
定义
useTable
Hook:- 使用 Vue 的
ref
和reactive
定义表格状态。 - 定义
loadData
、changePage
、changePageSize
和changeSort
函数来处理数据加载和分页、排序变化。 - 使用
onMounted
生命周期钩子在组件挂载时加载数据。
- 使用 Vue 的
-
定义
TableComponent
组件:- 接受
fetchData
和columns
作为组件属性。 - 使用
useTable
Hook 获取表格数据和操作函数。 - 渲染表格头部、主体和分页组件,并绑定相关事件。
- 接受
-
使用通用型表格组件:
- 在
ExampleTable.vue
中定义列配置和数据获取函数。 - 使用
TableComponent
并传递fetchData
和columns
属性。
- 在