Ant design Vue vben 使用过程中遇到的问题总结

TableBasicTable隔行样式 hover的坑

做一个根据状态来让每一行显示不同背景的效果，结果遇到hover放上去之后背景色变回白色 一开始尝试在样式中添加pointer-events: none 属性来屏蔽hover事件，结果click事件也被屏蔽。所以做出了如下调整，重要的是/deep/ table tbody tr:hover > td { background-color: none !important; } 取消掉hover 颜色设置，然后在不同状态对应的样式中设置。

template

<BasicTable @register="registerTable" :rowClassName="getCustomClassName">
</BasicTable>

js

function getCustomClassName(record) {
    return record.state == 0 ? 'no-result' : 'have-result';
  }

less

:deep(.no-result) {
    td {
      background-color: rgba(255, 125, 125, 1);
    }
    background-color: rgba(255, 125, 125, 1);
    color: #333333;
    &:hover > td {
      background-color: rgba(255, 125, 125, 1) !important;
    }
  }
  :deep(.have-result) {
    background-color: white;
    color: #333333;
    &:hover > td {
      background-color: white !important;
    }
  }

  /deep/ table tbody tr:hover > td {
    background-color: none !important;
  }