vue 如何拿到当前table的下标
时间: 2023-07-20 09:31:46 浏览: 77
如果你是在 Vue 中使用 `v-for` 渲染多个表格,并且需要获取当前表格的下标,可以把下标作为参数传递给表格组件,并在组件内部使用 `props` 接收下标。
例如:
```html
<template>
<div>
<table v-for="(table, index) in tables" :key="index">
<Table :table-data="table" :table-index="index"></Table>
</table>
</div>
</template>
<script>
import Table from './Table.vue'
export default {
data() {
return {
tables: [
{
title: 'Table 1',
data: [
{ name: 'John', age: 25 },
{ name: 'Mary', age: 30 }
]
},
{
title: 'Table 2',
data: [
{ name: 'Tom', age: 20 },
{ name: 'Jane', age: 35 }
]
}
]
}
},
components: {
Table
}
}
</script>
```
在这个例子中,我们在 `v-for` 循环中给每个表格传递了一个 `table-index` 属性,这个属性的值就是当前表格的下标。在 `Table` 组件中,我们使用 `props` 接收了这个下标,并在组件内部使用。
例如,在 `Table` 组件中可以这样使用下标:
```html
<template>
<div>
<h2>{{ tableData.title }}</h2>
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in tableData.data" :key="index">
<td>{{ item.name }}</td>
<td>{{ item.age }}</td>
</tr>
</tbody>
</table>
<p>Table index: {{ tableIndex }}</p>
</div>
</template>
<script>
export default {
props: {
tableData: Object,
tableIndex: Number
}
}
</script>
```
在 `Table` 组件中,我们使用了 `props` 接收了 `tableIndex` 属性,并在组件内部展示了这个属性的值。你可以根据这个下标做一些相应的处理,比如在表格标题中展示下标。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)