el-table行点击事件,js怎么通过ref定位el-table的行点击按钮
时间: 2023-11-11 11:34:14 浏览: 176
可以通过以下步骤来实现:
1. 在el-table标签上添加ref属性,指定一个名称,例如:ref="myTable"。
2. 在js中引用el-table组件,使用$refs属性获取myTable实例,例如:const myTable = this.$refs.myTable。
3. 在myTable实例上添加row-click事件监听器,例如:myTable.$on('row-click', handleRowClick),其中handleRowClick为自定义的处理函数。
4. 在handleRowClick函数中,通过event参数获取当前点击的行的数据,例如:const rowData = event.row。
完整代码示例:
<template>
<el-table :data="tableData" ref="myTable" @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>
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: '张三', age: 20, gender: '男' },
{ name: '李四', age: 25, gender: '女' },
{ name: '王五', age: 30, gender: '男' }
]
}
},
mounted() {
const myTable = this.$refs.myTable
myTable.$on('row-click', this.handleRowClick)
},
methods: {
handleRowClick(event) {
const rowData = event.row
console.log(rowData)
}
}
}
</script>
阅读全文