elui中table单元格点击事件
时间: 2023-10-25 16:07:54 浏览: 38
在Element UI中,可以通过给Table组件的某一列(column)添加scoped slot来自定义该列的内容和事件。在该列的scoped slot中,可以使用slot-scope指令获取当前行(row)和当前单元格(cell)的数据。
例如,在Table组件中,如果要给第二列添加单元格点击事件,可以这样写:
```html
<template>
<el-table :data="tableData">
<el-table-column label="姓名">
<template slot-scope="scope">
{{ scope.row.name }}
</template>
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<a @click="handleClick(scope.row, scope.$index)">编辑</a>
</template>
</el-table-column>
</el-table>
</template>
```
在上面的代码中,我们给第二列的scoped slot绑定了一个handleClick方法,在该方法中可以获取到当前点击的行数据和该行数据在表格中的索引。
```js
methods: {
handleClick(row, index) {
console.log('点击了第' + (index + 1) + '行的操作按钮,该行的数据为:', row);
}
}
```
在实际应用中,可以根据需要自定义单元格的内容和事件,实现更复杂的交互逻辑。