怎么获取el-table中的el-table-column相对应索引
时间: 2023-12-27 21:24:03 浏览: 197
根据提供的引用内容,可以通过以下方法获取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`来获取索引。
阅读全文