el-table取消hover
时间: 2024-09-29 07:15:37 浏览: 119
在Element UI的表格组件`el-table`中,如果你想要取消鼠标悬停效果(hover),即删除默认的鼠标经过时表格行的高亮效果,你可以通过设置表头的`row-hover`属性为`false`来实现。以下是具体的配置步骤:
```html
<template>
<el-table :data="tableData" row-key="id">
<el-table-column prop="name" label="姓名"></el-table-column>
<!-- 其他列... -->
<el-table-header slot-scope="scope">
<template #default="{ row }">
<span v-if="!row.hover">{{ scope.$index + 1 }}</span>
</template>
</el-table-header>
<el-table-row class="no-hover" v-for="(item, index) in tableData" :key="index">
<!-- 表格数据... -->
</el-table-row>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
// ...你的数据...
]
};
},
};
</script>
```
在上面的例子中,我们在`el-table-header`上设置了自定义模板,并且当`row.hover`为`false`时显示行号。另外,给每个表格行添加了`no-hover`类,但这只是一个类名,你需要根据实际需求调整样式以隐藏hover效果。
阅读全文
相关推荐


















