el-table选中效果不被浮动覆盖

687 阅读1分钟

eleement的表格有一个自带的鼠标浮动变色功能,你鼠标停在哪一列,哪一列变色 但是我项目一个地方需要实现选中功能,当然浮动变色也不能去掉

选中

image.png

我先找到这个,看实现单选需要添加哪个函数

根据网站的介绍,我需要在el-table里面添加两行代码

 highlight-current-row
      @current-change="handleCurrentChange"

再写一个方法,导出选中列的信息


 // 点击选中
    handleCurrentChange(val) {
      this.currentRow = val;
    },

这样选中就实现了,但是我发现

浮动会把选中的效果覆盖,于是我又研究了一会儿,问了一位道友后改好了

// 选中高亮
.el-table__body tr.current-row > td {
  background: red !important;
  color: skyblue;
}

关键在于要加个!important,这样选中的效果就会优先于浮动,而不会被浮动替代