单元格文本内容鼠标移入变色——只有在鼠标移入需要改变样式的单元格时,该单元格才会改变样式,而非移入本行中任意一个元素,该单元格都会改变样式
效果:
鼠标移入前:
鼠标移入后:
代码:
html
<el-table :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)" style="width: 85vw">
<el-table-column type="index" :index="indexMethod">
</el-table-column>
<el-table-column label="项目名称" sortable center >
<template slot-scope="tableData" >
<span class="taskName" >{{ tableData.row.taskName }}</span>
</template>
</el-table-column>
<el-table-column prop="taskType" label="项目类型" align="center">
</el-table-column>
</el-table>
css
<!-- 鼠标移入需要改变样式的单元格时,该单元格改变样式 -->
.el-table .cell:hover{
.taskName{
color: rgb(18, 157, 250);
cursor: pointer;
}
}
<!-- 鼠标移入本行中任意一个元素,该单元格改变样式 -->
.el-table__body tr:hover{
.taskName{
color: rgb(18, 157, 250);
cursor: pointer;
}
}
PS:如果css部分出现这样的情况
则需要在style中增加这样一行:lang=“scss” rel=“stylesheet/scss” ----------记得提前安装sass哦