el-table 点击后显示第几行
时间: 2023-08-08 09:04:30 浏览: 58
如果你使用的是 Element UI 的 el-table 组件,你可以通过监听 row-click 事件来获取点击的行数据。具体实现可以参考以下代码:
```html
<el-table @row-click="handleRowClick">
<!-- 表格列 -->
</el-table>
```
```javascript
export default {
methods: {
handleRowClick(row) {
// 在这里处理点击行后的逻辑,row 参数表示点击的行数据
console.log(row)
}
}
}
```
如果你想获取点击的行号,你可以在数据源中为每一行添加一个唯一的 id 字段,然后在 handleRowClick 方法中通过循环遍历数据源找到点击的行所在的索引号,例如:
```html
<el-table :data="tableData" @row-click="handleRowClick">
<!-- 表格列 -->
</el-table>
```
```javascript
export default {
data() {
return {
// 数据源
tableData: [
{ id: 1, name: '张三', age: 18 },
{ id: 2, name: '李四', age: 20 },
{ id: 3, name: '王五', age: 22 }
]
}
},
methods: {
handleRowClick(row) {
// 在这里获取点击的行号
const rowIndex = this.tableData.findIndex(item => item.id === row.id)
console.log(`点击了第 ${rowIndex + 1} 行`)
}
}
}
```
相关推荐
![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)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)