elementui中点击表格一行数据添加背景色
时间: 2023-10-26 21:12:15 浏览: 89
点击按钮设置表格背景色
4星 · 用户满意度95%
要在element-ui中实现点击表格一行数据添加背景色,你可以使用element-ui提供的表格事件来实现。具体实现方法如下:
1. 在el-table组件上绑定row-click事件,并在方法中获取点击行的索引值。
```html
<el-table @row-click="handleClick">
```
```javascript
methods: {
handleClick(row, column, event) {
// 获取点击行的索引值
const rowIndex = this.$refs.table.$el.querySelector('tbody tr[class*=\'el-table__row--current\']').getAttribute('data-row-index')
}
}
```
2. 在表格的行样式中,定义一个添加背景色的class,如:`highlight`。
```css
.highlight {
background-color: #f5f5f5;
}
```
3. 在方法中根据索引值,为点击的行添加`highlight`类名,同时移除其他行的`highlight`类名。
```javascript
methods: {
handleClick(row, column, event) {
// 获取点击行的索引值
const rowIndex = this.$refs.table.$el.querySelector('tbody tr[class*=\'el-table__row--current\']').getAttribute('data-row-index')
// 为点击的行添加highlight类名
this.$refs.table.$el.querySelectorAll('tbody tr').forEach((row, index) => {
if (index == rowIndex) {
row.classList.add('highlight')
} else {
row.classList.remove('highlight')
}
})
}
}
```
这样,当你点击表格中的某一行时,该行就会添加背景色,同时其他行的背景色会被移除。
阅读全文