surely-vue / surely-table

Performant advanced table component

Home Page:https://www.surely.cool

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

表格,hover行的时候,行元素上没有hover状态对应的类名

Carnia opened this issue · comments

commented

如题:
table从ant design vue 迁移到surely,鼠标hover到某一行,那一行没有形如‘xx-hover’的类名,无法实现如下需求:

某些cell里面有图标(这些cell可能是固定列里面的,也可能是可滚动列里的),平时隐藏,只有当前行hover的时候才展示出来

现在想用css去实现貌似有些困难,因为现在surely的hover高亮,是通过改变surely-table-wrapper的css变量(surely-table-row-bg-${rowId})内容来实现的,row没有类名变化。

尝试过如下写法,但是也是不行:

.surely-table-row {
  .hover-show {
    cursor: pointer;
    display: none;
  }

  &:hover {
    .hover-show {
      display: inline-flex;
      margin: 0 3px;
    }
  }
}

单纯靠surely-table-row这个固定类名是无法定位到整个表格的某一行(因为存在某些列fixed的情况,实际上最多会有3个表格结构形成固定列的效果),这就导致我hover在固定列上,非固定列的cell里的图标还是无法展示。

SO:

  1. 去掉hover类名是否出于性能考虑?能否加上?
  2. 另外hover行的样式是否能够修改?目前好像没有看到相关的属性。
commented

版本3.0.2

1、的确是因为性能考虑做了优化,可以看下这个issue #110
2、样式只能通过 css var 更改背景色
3、下个版本加个属性控制下是否添加 class (会有一定的性能损失)

你可以先退回到 3.0 以下使用

update to 3.0.3