el-table双击单元格选中单元格内的数据
时间: 2023-10-10 19:11:00 浏览: 138
你可以给 `el-table` 组件绑定 `row-dblclick` 事件,然后在事件处理函数中获取到双击的单元格的数据。具体实现如下:
```vue
<template>
<el-table :data="tableData" @row-dblclick="handleRowDblclick">
<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: 22, gender: '女' },
{ name: '王五', age: 21, gender: '男' }
]
}
},
methods: {
handleRowDblclick(row, column, event) {
const cellData = row[column.property]
console.log(cellData)
}
}
}
</script>
```
在 `handleRowDblclick` 方法中,`row` 参数表示双击的单元格所在的行的数据,`column` 参数表示双击的单元格的列信息,`event` 参数表示双击事件对象。通过 `row[column.property]` 可以获取到双击的单元格内的数据。
阅读全文