vue实现表
Vue实现表格的基本方法
使用Vue实现表格功能可以通过多种方式完成，以下是几种常见的方法：
使用原生HTML表格结合Vue数据绑定
<template>
<table>
<thead>
<tr>
<th v-for="header in headers" :key="header">{{ header }}</th>
</tr>
</thead>
<tbody>
<tr v-for="row in rows" :key="row.id">
<td v-for="cell in row" :key="cell">{{ cell }}</td>
</tr>
</tbody>
</table>
</template>
<script>
export default {
data() {
return {
headers: ['ID', 'Name', 'Age'],
rows: [
{ id: 1, Name: 'John', Age: 25 },
{ id: 2, Name: 'Jane', Age: 30 }
]
}
}
}
</script>使用第三方表格组件库
Element UI的表格组件：
<template>
<el-table :data="tableData">
<el-table-column prop="date" label="Date"></el-table-column>
<el-table-column prop="name" label="Name"></el-table-column>
<el-table-column prop="address" label="Address"></el-table-column>
</el-table>
</template>Vuetify的表格组件：
<template>
<v-data-table :headers="headers" :items="items"></v-data-table>
</template>实现表格的高级功能
分页功能
使用Element UI实现分页：
<template>
<el-table :data="currentTableData">
<!-- 表格列定义 -->
</el-table>
<el-pagination
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-size="pageSize"
:total="total">
</el-pagination>
</template>排序功能
添加排序功能：
<el-table :data="tableData" @sort-change="handleSortChange">
<el-table-column prop="date" label="Date" sortable></el-table-column>
<!-- 其他列 -->
</el-table>筛选功能
实现筛选：
<el-table :data="filteredData">
<el-table-column prop="name" label="Name">
<template #header>
<el-input v-model="searchName" placeholder="Search name"></el-input>
</template>
</el-table-column>
</el-table>自定义表格组件
创建可复用的表格组件：
<!-- TableComponent.vue -->
<template>
<table>
<thead>
<slot name="header"></slot>
</thead>
<tbody>
<slot name="body" v-for="item in data" :item="item"></slot>
</tbody>
</table>
</template>
<script>
export default {
props: ['data']
}
</script>使用自定义组件：
<template>
<table-component :data="tableData">
<template #header>
<tr>
<th>ID</th>
<th>Name</th>
</tr>
</template>
<template #body="{ item }">
<tr>
<td>{{ item.id }}</td>
<td>{{ item.name }}</td>
</tr>
</template>
</table-component>
</template>
