element-ui中table——单元格文本内容鼠标移入变色

单元格文本内容鼠标移入变色——只有在鼠标移入需要改变样式的单元格时，该单元格才会改变样式，而非移入本行中任意一个元素，该单元格都会改变样式

效果：

鼠标移入前：

鼠标移入后：

代码：

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哦