el-table监听鼠标进入一行的事件
时间: 2023-10-17 17:09:09 浏览: 150
【JavaScript源代码】vue 使用 sortable 实现 el-table 拖拽排序功能.docx
你可以通过 `@mouseenter` 监听鼠标进入行的事件,例如:
```html
<template>
<el-table :data="tableData">
<el-table-column prop="name" label="Name" @mouseenter="handleMouseEnter"></el-table-column>
<el-table-column prop="age" label="Age"></el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: 'Alice', age: 20 },
{ name: 'Bob', age: 30 },
{ name: 'Charlie', age: 40 }
]
}
},
methods: {
handleMouseEnter(row) {
console.log('Mouse entered:', row)
}
}
}
</script>
```
在上面的例子中,当鼠标进入名字列时,会触发 `handleMouseEnter` 方法,并打印出当前行的数据。你也可以根据需要修改 `handleMouseEnter` 方法的实现。
阅读全文