elementUI 中 @cell-click="handleCellClick" 访问不到行数和列数
时间: 2024-04-29 18:24:03 浏览: 124
在ElementUI中,@cell-click事件只会返回当前点击的单元格的值和索引,而不会返回行数和列数。如果需要获取行数和列数,可以使用作用域插槽(scoped slot)的方式来自定义表格的内容,然后在自定义的内容中添加点击事件,通过事件参数获取行数和列数。
例如,可以这样使用作用域插槽来自定义表格内容:
```html
<el-table :data="tableData">
<el-table-column label="姓名" prop="name">
<template slot-scope="{ row }">
<div @click="handleCellClick(row.name)">{{ row.name }}</div>
</template>
</el-table-column>
<el-table-column label="年龄" prop="age">
<template slot-scope="{ row }">
<div @click="handleCellClick(row.age)">{{ row.age }}</div>
</template>
</el-table-column>
</el-table>
```
在这个例子中,使用了作用域插槽来自定义每个单元格的内容,并添加了点击事件。在点击事件中,可以通过事件参数获取当前行的数据以及列的属性名,从而得到行数和列数。
```javascript
methods: {
handleCellClick(value, { $index, column }) {
console.log('行数:', $index)
console.log('列数:', column.property)
console.log('值:', value)
}
}
```
这样就可以在点击单元格时获取到行数和列数了。
阅读全文