vue表格实现教学
Vue 表格实现方法
基础表格实现
使用 Vue 的 v-for 指令可以快速渲染表格数据。以下是一个简单的示例：
<template>
<table>
<thead>
<tr>
<th v-for="header in headers" :key="header">{{ header }}</th>
</tr>
</thead>
<tbody>
<tr v-for="item in items" :key="item.id">
<td>{{ item.name }}</td>
<td>{{ item.age }}</td>
</tr>
</tbody>
</table>
</template>
<script>
export default {
data() {
return {
headers: ['Name', 'Age'],
items: [
{ id: 1, name: 'Alice', age: 25 },
{ id: 2, name: 'Bob', age: 30 }
]
}
}
}
</script>使用第三方组件库
Element UI 和 Vuetify 等库提供了更强大的表格组件。
Element UI 示例：
<template>
<el-table :data="items">
<el-table-column prop="name" label="Name"></el-table-column>
<el-table-column prop="age" label="Age"></el-table-column>
</el-table>
</template>Vuetify 示例：
<template>
<v-data-table :headers="headers" :items="items"></v-data-table>
</template>表格排序功能
可以通过计算属性实现客户端排序：
computed: {
sortedItems() {
return [...this.items].sort((a, b) => a.age - b.age)
}
}表格分页处理
使用 v-pagination 组件或计算属性实现分页：
<template>
<table>
<!-- 表格内容 -->
</table>
<el-pagination
@current-change="handlePageChange"
:current-page="currentPage"
:page-size="pageSize"
:total="totalItems">
</el-pagination>
</template>表格筛选功能
添加搜索框实现筛选：
<input v-model="searchText" placeholder="Search...">
<table>
<tr v-for="item in filteredItems" :key="item.id">
<!-- 表格行内容 -->
</tr>
</table>
<script>
computed: {
filteredItems() {
return this.items.filter(item =>
item.name.includes(this.searchText)
)
}
}
</script>响应式表格设计
使用 CSS 媒体查询使表格适应不同屏幕尺寸：
@media screen and (max-width: 600px) {
table {
display: block;
overflow-x: auto;
}
}性能优化技巧
对于大型数据集，考虑使用虚拟滚动技术：
<template>
<virtual-list :size="50" :remain="10" :items="largeData">
<template v-slot:default="{ item }">
<tr>
<td>{{ item.name }}</td>
<td>{{ item.age }}</td>
</tr>
</template>
</virtual-list>
</template>
