vue elementui table 通过按钮获取当前行某列的信息
时间: 2024-02-18 11:02:03 浏览: 177
你可以通过在表格中的每一行中添加一个按钮,并且给每一个按钮绑定一个事件来获取当前行某列的信息。具体实现方法如下:
1. 在表格中的每一行中添加一个按钮,可以使用 ElementUI 的 el-button 组件实现。
2. 给每一个按钮绑定一个事件,可以使用 ElementUI 的 @click 属性来绑定事件。
3. 在事件处理函数中,可以通过传入的参数获取当前行的数据。具体方法如下:
- 首先,需要在表格的 columns 属性中定义需要获取的列的字段名,例如:
```
columns: [
{
label: '姓名',
prop: 'name'
},
{
label: '年龄',
prop: 'age'
},
// ...
]
```
- 然后,在事件处理函数中,可以通过参数 row 获取当前行的数据,例如:
```
methods: {
handleClick(row) {
console.log(row.name) // 获取当前行的姓名
console.log(row.age) // 获取当前行的年龄
// ...
}
}
```
- 最后,在按钮中使用事件处理函数,例如:
```
<el-table-column label="操作">
<template slot-scope="scope">
<el-button type="primary" @click="handleClick(scope.row)">获取信息</el-button>
</template>
</el-table-column>
```
阅读全文