我怎样给uniapp 中的uni-table 的每一行通过点击事件添加背景色
时间: 2023-12-24 19:02:16 浏览: 297
您可以使用 `@click-row` 事件来监听行的点击事件,然后在事件处理函数中为当前行添加背景色。具体实现方式如下:
1. 在 `uni-table` 标签上添加 `@click-row` 事件监听器,并指定事件处理函数:
```html
<uni-table :data="tableData" @click-row="handleClickRow">
<!-- 表格列定义 -->
</uni-table>
```
2. 在组件的 `methods` 选项中定义 `handleClickRow` 方法来处理行的点击事件,并为当前行添加背景色:
```js
methods: {
handleClickRow(row) {
// 移除之前选中的行的背景色
const selectedRows = document.querySelectorAll('.selected-row')
selectedRows.forEach(selectedRow => {
selectedRow.classList.remove('selected-row')
})
// 为当前选中的行添加背景色
const currentRow = document.querySelector(`.row-${row._uid}`)
currentRow.classList.add('selected-row')
}
}
```
3. 在 CSS 样式中定义 `.selected-row` 类来指定选中行的背景色:
```css
.selected-row {
background-color: #f5f5f5;
}
```
这样,当用户点击表格中的某一行时,该行将被高亮显示。
阅读全文