el-table默认高亮某一行
时间: 2023-06-28 17:16:07 浏览: 170
您好!对于 Element UI 中的 el-table 组件,默认情况下是没有高亮某一行的功能的。但是您可以通过以下方式实现:
1. 在 el-table 中绑定当前行数据的索引。例如:
```
<el-table :data="tableData" @row-click="handleRowClick">
<el-table-column prop="name" label="Name"></el-table-column>
<el-table-column prop="age" label="Age"></el-table-column>
</el-table>
```
2. 在 methods 中定义 handleRowClick 方法,根据当前行的索引来设置高亮样式。例如:
```
methods: {
handleRowClick(row, column, event) {
this.currentRow = row;
}
}
```
3. 在 el-table-row 中绑定 class,根据当前行的索引来判断是否需要添加高亮样式。例如:
```
<template slot-scope="scope">
<el-table-row :class="{ 'highlight': scope.$index === currentRow }">
<el-table-column :label="scope.row.name"></el-table-column>
<el-table-column :label="scope.row.age"></el-table-column>
</el-table-row>
</template>
```
4. 在样式表中定义高亮样式。例如:
```
.highlight {
background-color: #f5f5f5;
}
```
这样就可以实现 el-table 默认高亮某一行的功能了。
阅读全文
相关推荐














