vue 表格实现
Vue 表格实现方法
在 Vue 中实现表格功能可以通过多种方式完成，以下介绍几种常见的方法：
使用原生 HTML 表格
最简单的表格可以通过 Vue 模板中的原生 HTML 表格元素实现：
<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 v-for="header in headers" :key="header">{{ item[header] }}</td>
</tr>
</tbody>
</table>
</template>
<script>
export default {
data() {
return {
headers: ['姓名', '年龄', '职业'],
items: [
{ id: 1, 姓名: '张三', 年龄: 25, 职业: '工程师' },
{ id: 2, 姓名: '李四', 年龄: 30, 职业: '设计师' }
]
}
}
}
</script>使用第三方组件库
主流 UI 框架如 Element UI、Ant Design Vue 等提供了功能丰富的表格组件：
Element UI 示例：
<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: '上海市普陀区金沙江路 1518 弄'
}]
}
}
}
</script>实现可编辑表格
通过结合表单元素可以实现可编辑表格：
<template>
<table>
<tr v-for="(item, index) in items" :key="index">
<td>
<input v-model="item.name" @blur="saveItem(index)">
</td>
</tr>
</table>
</template>
<script>
export default {
data() {
return {
items: [
{ name: '初始值' }
]
}
},
methods: {
saveItem(index) {
console.log('保存修改:', this.items[index])
}
}
}
</script>表格性能优化
对于大数据量的表格，可以使用虚拟滚动技术：
<template>
<virtual-list :size="40" :remain="10" :data="bigData">
<template #default="{ item }">
<div class="row">{{ item.name }}</div>
</template>
</virtual-list>
</template>表格排序和筛选
实现基本的排序和筛选功能：
computed: {
sortedItems() {
return [...this.items].sort((a, b) => a.age - b.age)
},
filteredItems() {
return this.items.filter(item => item.age > 25)
}
}以上方法可以根据具体需求选择使用，原生表格适合简单场景，组件库提供了更多开箱即用的功能，自定义实现则提供了最大的灵活性。
