vxe-table可编辑表格插槽获取当前行数据
时间: 2025-06-27 10:04:24 浏览: 18
### 获取 vxe-table 可编辑表格中的当前行数据
在 `vxe-table` 的可编辑表格中,可以通过插槽访问当前行的数据。具体实现方式如下:
#### 使用方法
`vxe-table` 提供了多种事件来操作表格数据,其中最常用的是通过 `@cell-click` 或者自定义单元格插槽的方式获取当前行的信息。
以下是基于插槽访问当前行数据的代码示例[^1]:
```vue
<template>
<vxe-table :data="tableData">
<!-- 自定义列模板 -->
<vxe-column field="name" title="Name">
<template #default="{ row }">
<span>{{ row.name }}</span> <!-- 这里可以访问到当前行数据 -->
</template>
</vxe-column>
<vxe-column field="age" title="Age">
<template #default="{ row }">
<input type="text" v-model="row.age"> <!-- 动态绑定当前行 age 字段 -->
</template>
</vxe-column>
</vxe-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ id: 1, name: 'Test1', age: 20 },
{ id: 2, name: 'Test2', age: 22 }
]
};
}
};
</script>
```
上述代码展示了如何通过插槽 (`#default`) 访问每一行的数据对象 `{ row }` 并对其进行操作。
如果需要监听特定事件并动态处理当前行数据,则可以使用 `@cell-click` 方法:
```javascript
<vxe-table
:data="tableData"
@cell-click="handleCellClick">
<vxe-column field="name" title="Name"></vxe-column>
<vxe-column field="age" title="Age"></vxe-column>
</vxe-table>
methods: {
handleCellClick({ row }) {
console.log('Current Row Data:', row);
}
}
```
此部分实现了点击任意单元格时触发回调函数,并打印对应的整行记录信息。
---
#### 数据交互逻辑扩展
对于更复杂的场景(如关联查询),可能还需要结合后端接口完成业务需求。例如,在某些情况下,前端传递选中行的关键字至服务端进行进一步筛选或更新操作。以下是一个简单的 SQL 查询案例用于参考[^2]:
```java
@Override
public StaffSupervisionStaff getInfoByPlanDetailId(String planId, Integer userType) {
return baseMapper.getInfoByPlanDetailId(planId, userType); // 根据计划详情 ID 和用户类型返回对应员工监督信息
}
```
该片段展示了一个典型的 DAO 层调用过程,适用于当需要依据条件从数据库提取指定条目时的情况。
---
阅读全文
相关推荐


















