uniapp 中uni-tabler如何做到点击某行里的按钮 来获取本行的值
时间: 2023-12-23 16:06:21 浏览: 315
uniapp-table中改版uni-table插件
在uni-app中,可以通过在 `uni-table` 组件中使用插槽来自定义每行的内容,然后在每行的内容中添加按钮,通过按钮的点击事件来获取本行的值。
具体实现步骤如下:
1. 在 `uni-table` 组件中添加 `slot` 插槽。
```html
<uni-table :data="tableData">
<template slot="default" slot-scope="{ item }">
<!-- 自定义每行的内容 -->
<view class="table-row">
<view class="table-cell">{{ item.name }}</view>
<view class="table-cell">{{ item.age }}</view>
<view class="table-cell"><button @tap="handleClick(item)">点击</button></view>
</view>
</template>
</uni-table>
```
2. 在每行的内容中添加按钮,并绑定点击事件 `@tap`。
3. 在点击事件中,通过参数 `item` 来获取本行的值。
```js
methods: {
handleClick(item) {
console.log(item) // 输出本行的值
}
}
```
这样就可以通过按钮的点击事件来获取本行的值了。
阅读全文