怎么获取el-table中的el-table-column相对应索引
时间: 2023-12-27 07:24:03 浏览: 210
根据提供的引用内容,可以通过以下方法获取el-table中的el-table-column相对应的索引:
1. 使用slot-scope来获取索引:
```html
<el-table-column label="操作" width="200px">
<template v-slot="scope">
<el-button @click="change(scope.$index)">修改</el-button>
<el-button type="danger" @click="del(scope.$index)">删除</el-button>
</template>
</el-table-column>
```
在这个例子中,通过`scope.$index`可以获取到el-table-column相对应的索引。
2. 使用自定义属性来获取索引:
```html
<el-table-column label="操作" width="200px">
<template v-slot="scope">
<el-button @click="change(scope.row.ID, scope.$attrs.index)">修改</el-button>
<el-button type="danger" @click="del(scope.row.ID, scope.$attrs.index)">删除</el-button>
</template>
</el-table-column>
```
在这个例子中,通过`scope.$attrs.index`可以获取到el-table-column相对应的索引。
3. 使用ref来获取索引:
```html
<el-table-column label="操作" width="200px">
<template v-slot="scope" ref="column">
<el-button @click="change(scope.row.ID, getColumnIndex($refs.column))">修改</el-button>
<el-button type="danger" @click="del(scope.row.ID, getColumnIndex($refs.column))">删除</el-button>
</template>
</el-table-column>
```
在这个例子中,通过`$refs.column`可以获取到el-table-column的引用,然后通过自定义的方法`getColumnIndex`来获取索引。
阅读全文
相关推荐
![-](https://img-home.csdnimg.cn/images/20241231045021.png)
![-](https://img-home.csdnimg.cn/images/20250102104920.png)
![-](https://img-home.csdnimg.cn/images/20241231044930.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)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)