vue 表格实现
Vue 表格实现方法
使用 Element UI 表格组件
Element UI 提供了强大的表格组件，支持排序、筛选、分页等功能。安装 Element UI 后，可以直接使用 el-table 组件。
<template>
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="date" label="日期" width="180"></el-table-column>
<el-table-column prop="name" label="姓名" width="180"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ date: '2023-01-01', name: '张三', address: '北京市' },
{ date: '2023-01-02', name: '李四', address: '上海市' },
]
}
}
}
</script>使用 Vuetify 表格组件
Vuetify 是另一个流行的 Vue UI 框架，其表格组件功能丰富且易于定制。
<template>
<v-data-table :headers="headers" :items="items"></v-data-table>
</template>
<script>
export default {
data() {
return {
headers: [
{ text: '日期', value: 'date' },
{ text: '姓名', value: 'name' },
{ text: '地址', value: 'address' },
],
items: [
{ date: '2023-01-01', name: '张三', address: '北京市' },
{ date: '2023-01-02', name: '李四', address: '上海市' },
]
}
}
}
</script>自定义表格组件
如果需要更灵活的表格实现，可以自定义表格组件。以下是一个简单的自定义表格实现示例。
<template>
<table class="custom-table">
<thead>
<tr>
<th v-for="column in columns" :key="column.key">{{ column.title }}</th>
</tr>
</thead>
<tbody>
<tr v-for="row in data" :key="row.id">
<td v-for="column in columns" :key="column.key">{{ row[column.key] }}</td>
</tr>
</tbody>
</table>
</template>
<script>
export default {
props: {
columns: Array,
data: Array
}
}
</script>
<style>
.custom-table {
width: 100%;
border-collapse: collapse;
}
.custom-table th, .custom-table td {
border: 1px solid #ddd;
padding: 8px;
}
.custom-table th {
background-color: #f2f2f2;
}
</style>使用第三方表格库
对于复杂需求，可以使用专门的表格库如 ag-grid-vue 或 vue-table-component。这些库提供了高级功能如虚拟滚动、单元格编辑等。
<template>
<ag-grid-vue
style="width: 100%; height: 500px;"
class="ag-theme-alpine"
:columnDefs="columnDefs"
:rowData="rowData"
></ag-grid-vue>
</template>
<script>
import { AgGridVue } from 'ag-grid-vue';
export default {
components: { AgGridVue },
data() {
return {
columnDefs: [
{ headerName: '日期', field: 'date' },
{ headerName: '姓名', field: 'name' },
{ headerName: '地址', field: 'address' },
],
rowData: [
{ date: '2023-01-01', name: '张三', address: '北京市' },
{ date: '2023-01-02', name: '李四', address: '上海市' },
]
}
}
}
</script>表格性能优化
对于大数据量的表格，可以使用虚拟滚动或分页加载以提高性能。Element UI 和 Vuetify 都支持这些功能。
<template>
<el-table :data="tableData" height="500" :row-key="row => row.id">
<el-table-column prop="date" label="日期"></el-table-column>
<el-table-column prop="name" label="姓名"></el-table-column>
</el-table>
</template>通过以上方法，可以根据项目需求选择合适的表格实现方式。
