uni-app多选表格怎么拿到勾选行的数据
时间: 2024-09-26 16:11:59 浏览: 34
uni-app实现select标签功能
在 UniApp 中,如果你想获取一个多选表格中被勾选行的数据,你可以利用 UniForm 组件提供的 `@on-change` 或 `@cell-changed` 事件。首先,你需要在表格组件上设置相应的选择模式(例如 `multiple`),然后监听这些事件。
下面是一个简单的例子:
```html
<view class="table-container">
<uni-table multiple>
<uni-table-column title="标题" prop="title" />
<!-- 其他列... -->
<uni-table-column align="center" width="80">
<template slot-scope="scope">
<uni-switch v-model="scope.row.checked" @change="handleCheckChange(scope.$index, scope.row)" />
</template>
</uni-table-column>
</uni-table>
</view>
<script>
export default {
data() {
return {
checkedItems: [], // 存储被选中的行数据
};
},
methods: {
handleCheckChange(index, row) {
if (row.checked) {
this.checkedItems.push(row); // 当切换到选中时,添加到数组
} else {
const indexInList = this.checkedItems.findIndex(item => item.id === row.id);
if (indexInList !== -1) { // 如果找到对应项,则移除
this.checkedItems.splice(indexInList, 1);
}
}
},
},
};
</script>
```
在这个例子中,`handleCheckChange` 方法会在每次开关切换时被调用,它检查行是否被选中,如果是则将其数据添加到 `checkedItems` 数组中,反之则从数组中移除。
阅读全文