el-table移入当前行高亮
时间: 2023-11-11 08:00:01 浏览: 237
VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法
5星 · 资源好评率100%
要实现el-table移入当前行高亮,可以通过设置row-class-name属性来实现。具体步骤如下:
1. 在el-table标签上添加row-class-name属性,值为一个函数,该函数接收一个参数row,表示当前行的数据对象。
2. 在该函数中,判断当前行是否为鼠标所在行,如果是,则返回一个字符串,表示该行的样式名;如果不是,则返回空字符串。
3. 在样式表中定义该样式名对应的样式,例如设置背景色为黄色等。
示例代码如下:
```
<el-table :data="tableData" row-class-name="tableRowClassName">
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
</el-table>
...
methods: {
tableRowClassName({ row, rowIndex }) {
return rowIndex === this.hoverRowIndex ? 'highlight-row' : '';
},
handleMouseEnter(index) {
this.hoverRowIndex = index;
},
handleMouseLeave() {
this.hoverRowIndex = -1;
}
},
data() {
return {
tableData: [
{ name: '张三', age: 18, address: '北京市' },
{ name: '李四', age: 20, address: '上海市' },
{ name: '王五', age: 22, address: '广州市' }
],
hoverRowIndex: -1
};
}
```
阅读全文