vue 页面加载后怎么重新渲染表格
时间: 2024-05-07 12:15:51 浏览: 9
如果您的表格是通过 Vue 组件实现的,您可以使用 Vue 的数据驱动机制来重新渲染表格。具体步骤如下:
1. 在 Vue 实例中定义表格数据。例如:
```
data: {
tableData: [
{ name: 'John', age: 20 },
{ name: 'Mary', age: 25 },
{ name: 'Tom', age: 30 }
]
}
```
2. 在组件中使用表格数据。例如:
```
<template>
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in tableData" :key="index">
<td>{{ item.name }}</td>
<td>{{ item.age }}</td>
</tr>
</tbody>
</table>
</template>
<script>
export default {
data() {
return {
tableData: []
}
}
}
</script>
```
3. 当需要重新渲染表格时,修改表格数据。例如:
```
this.tableData = [
{ name: 'Jack', age: 22 },
{ name: 'Lucy', age: 28 }
];
```
4. Vue 会自动重新渲染表格。例如:
```
<template>
<div>
<button @click="reloadTable">Reload Table</button>
<table>
<!-- 表格内容 -->
</table>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: 'John', age: 20 },
{ name: 'Mary', age: 25 },
{ name: 'Tom', age: 30 }
]
}
},
methods: {
reloadTable() {
// 修改表格数据
this.tableData = [
{ name: 'Jack', age: 22 },
{ name: 'Lucy', age: 28 }
];
}
}
}
</script>
```