vue 实现动态表格
实现动态表格的基本思路
在Vue中实现动态表格通常涉及以下核心逻辑：数据驱动渲染、动态列与行处理、以及用户交互功能（如增删改查）。以下是具体实现方法：
基础动态表格实现
使用v-for指令循环渲染表格行和列，数据存储在Vue的data中：
<template>
<table>
<thead>
<tr>
<th v-for="(column, index) in columns" :key="index">{{ column.title }}</th>
</tr>
</thead>
<tbody>
<tr v-for="(row, rowIndex) in tableData" :key="rowIndex">
<td v-for="(column, colIndex) in columns" :key="colIndex">
{{ row[column.key] }}
</td>
</tr>
</tbody>
</table>
</template>
<script>
export default {
data() {
return {
columns: [
{ title: '姓名', key: 'name' },
{ title: '年龄', key: 'age' }
],
tableData: [
{ name: '张三', age: 25 },
{ name: '李四', age: 30 }
]
};
}
};
</script>动态添加/删除行列
通过方法修改数据实现动态增删：
<template>
<button @click="addRow">添加行</button>
<button @click="addColumn">添加列</button>
<!-- 表格结构同上 -->
</template>
<script>
export default {
methods: {
addRow() {
this.tableData.push({ name: '新用户', age: 0 });
},
addColumn() {
this.columns.push({ title: '新列', key: 'newColumn' });
this.tableData.forEach(row => row.newColumn = '默认值');
}
}
};
</script>可编辑表格
结合v-model实现单元格编辑：
<template>
<td v-for="(column, colIndex) in columns" :key="colIndex">
<input
v-if="editable[rowIndex][colIndex]"
v-model="row[column.key]"
@blur="toggleEdit(rowIndex, colIndex)"
>
<span v-else @click="toggleEdit(rowIndex, colIndex)">{{ row[column.key] }}</span>
</td>
</template>
<script>
export default {
data() {
return {
editable: [] // 二维数组记录编辑状态
};
},
created() {
// 初始化编辑状态矩阵
this.editable = this.tableData.map(() =>
Array(this.columns.length).fill(false)
);
},
methods: {
toggleEdit(rowIndex, colIndex) {
this.$set(this.editable[rowIndex], colIndex, !this.editable[rowIndex][colIndex]);
}
}
};
</script>性能优化建议
对于大数据量场景，建议使用虚拟滚动或分页：
- 虚拟滚动库：
vue-virtual-scroller - 分页组件：
v-pagination或自定义分页逻辑
<template>
<div v-for="row in visibleData" :key="row.id"><!-- 仅渲染可视区域 --></div>
</template>复杂功能扩展
-
动态表头排序
通过@click事件触发排序方法，更新tableData排序。 -
列宽拖动
使用mousedown事件监听，结合resize样式实现。 -
服务端数据
通过axios异步获取数据，更新tableData。
以上方法可根据实际需求组合使用，Vue的动态响应特性会自动处理视图更新。
