el-table 点击后显示点击了第几行
时间: 2023-08-08 16:04:30 浏览: 45
如果你想要在 el-table 组件中点击某一行后显示点击的行号,可以通过监听 row-click 事件,在事件处理函数中获取点击的行数据,再通过遍历数据源找到该行所在的索引号,最后将索引号加一作为点击的行号。具体实现可以参考以下代码:
```html
<el-table :data="tableData" @row-click="handleRowClick">
<!-- 表格列 -->
</el-table>
```
```javascript
export default {
data() {
return {
// 数据源
tableData: [
{ name: '张三', age: 18 },
{ name: '李四', age: 20 },
{ name: '王五', age: 22 }
]
}
},
methods: {
handleRowClick(row) {
// 在这里获取点击的行号
const rowIndex = this.tableData.findIndex(item => item === row)
console.log(`点击了第 ${rowIndex + 1} 行`)
}
}
}
```
在这个例子中,我们通过 findIndex 方法在数据源中查找点击的行所在的索引号,然后将索引号加一作为点击的行号输出到控制台。需要注意的是,我们使用的是 === 运算符来比较对象是否相等,这是因为在 JavaScript 中,对象之间的比较是按照引用地址比较的,只有引用地址相同的对象才被认为是相等的。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.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)