vue实现table
Vue 实现 Table 的基本方法
使用原生 HTML 表格
通过 Vue 的 v-for 指令动态渲染表格数据，适合简单场景。
<template>
<table>
<thead>
<tr>
<th v-for="col in columns" :key="col.key">{{ col.title }}</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>
</template>
<script>
export default {
data() {
return {
columns: [
{ key: 'name', title: '姓名' },
{ key: 'age', title: '年龄' }
],
data: [
{ id: 1, name: '张三', age: 25 },
{ id: 2, name: '李四', age: 30 }
]
}
}
}
</script>使用第三方组件库
推荐使用成熟的 UI 库如 Element UI、Ant Design Vue 等，提供丰富的表格功能（排序、分页、筛选等）。
Element UI 示例：
<template>
<el-table :data="tableData">
<el-table-column prop="date" label="日期"></el-table-column>
<el-table-column prop="name" label="姓名"></el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ date: '2023-01-01', name: '王五' },
{ date: '2023-01-02', name: '赵六' }
]
}
}
}
</script>高级功能实现
动态列与自定义渲染
通过 scoped slots 实现复杂单元格内容渲染。
<template>
<table>
<tr v-for="row in data" :key="row.id">
<td v-for="col in columns" :key="col.key">
<slot :name="`cell-${col.key}`" :row="row">
{{ row[col.key] }}
</slot>
</td>
</tr>
</table>
</template>分页控制
结合分页组件实现数据分段加载。
<template>
<div>
<table>...</table>
<el-pagination
@current-change="handlePageChange"
:current-page="currentPage"
:page-size="pageSize"
:total="total">
</el-pagination>
</div>
</template>
<script>
export default {
methods: {
handlePageChange(page) {
this.currentPage = page
this.fetchData()
}
}
}
</script>性能优化建议
对于大数据量场景，建议使用虚拟滚动技术（如 vue-virtual-scroller）避免 DOM 节点过多导致的性能问题。
<template>
<RecycleScroller
:items="data"
:item-size="50"
key-field="id">
<template v-slot="{ item }">
<tr>
<td>{{ item.name }}</td>
</tr>
</template>
</RecycleScroller>
</template>
