如何把element ui表格中的某一列数据传到后台
时间: 2023-08-31 07:13:01 浏览: 103
layui数据表格重载实现往后台传参
在使用 Element UI 表格时,可以通过监听表格的某些事件(如 `@selection-change`、`@cell-click` 等)来获取到选中的行或点击的单元格的数据,然后将这些数据发送给后台。
例如,在表格中添加一个“操作”列,点击该列中的“编辑”按钮时,可以获取到该行数据并发送给后台进行更新操作。示例代码如下:
```html
<el-table :data="tableData" @cell-click="handleCellClick">
<el-table-column label="姓名" prop="name"></el-table-column>
<el-table-column label="年龄" prop="age"></el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button type="primary" size="mini" @click="handleEdit(scope.row)">编辑</el-button>
</template>
</el-table-column>
</el-table>
```
```javascript
export default {
data() {
return {
tableData: [
{ name: '张三', age: 20 },
{ name: '李四', age: 25 },
{ name: '王五', age: 30 }
]
}
},
methods: {
handleCellClick(row, column, event) {
// 在这里可以获取到点击的单元格的行数据 row,然后发送给后台进行处理
},
handleEdit(row) {
// 在这里可以获取到要编辑的行数据 row,然后发送给后台进行更新操作
}
}
}
```
需要注意的是,具体的发送方式和后台 API 接口的设计都需要根据具体的业务需求来实现。
阅读全文