el-table长点击事件
时间: 2023-10-02 22:14:13 浏览: 31
el-table长点击事件可以通过给el-table组件绑定一个@row-click事件来实现,代码如下:
```
<template>
<div>
<el-table :data="tableData" @row-click="handleRowClick">
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
<el-table-column prop="gender" label="性别"></el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: '张三', age: 18, gender: '男' },
{ name: '李四', age: 20, gender: '女' },
{ name: '王五', age: 22, gender: '男' }
]
}
},
methods: {
handleRowClick(row, column, event) {
console.log('长点击了第' + row.index + '行,数据为:', row)
}
}
}
</script>
```
在上述代码中,给el-table组件绑定了一个@row-click事件,并通过handleRowClick方法来处理事件,当用户长点击某一行时,会触发handleRowClick方法,其中row参数为当前点击的行数据,column参数为当前点击的列数据,event参数为当前点击事件的原生DOM事件。在handleRowClick方法中,可以根据row参数来获取当前点击的行数据并进行相关处理。