项目需求,采用ant design table展示数据,需要点击行变色,表格行之间有颜色区分(斑马色)

效果图:
在这里插入图片描述

      <a-table
        :columns="tableLabel"//表头
        :data-source="tableData"//表格数据
        :customRow="rowClick"//点击事件
        :rowClassName="setRowClassName"//设置每行样式
        :scroll="{ x: 1632,y:675}"//横纵向滚动条
      />
// 点击表格行,执行操作(双击也可以在这里写)
  rowClick(record, index) {
    return {
      on: {
        click: () => {
          // console.log(record);
          this.currentRow = record;//自己定义个变量,用于保存点击行的数据
        },
      },
    };
  }
  // 行样式设置
  setRowClassName(record, index) {
    let rowColor = (index % 2 === 0) ? "evenRowStyl" : "";//判断单双行,赋予不同样式
    return record === this.currentRow ? "clickRowStyl" : rowColor;//赋予点击行样式
  }


```css
//点击行的样式
.clickRowStyl {
  background-color: #bbbbff !important;
}
//偶数行的样式
.evenRowStyl {
  background-color: #aad4fd46 !important;
}

.ant-table-tbody>tr:hover:not(.ant-table-expanded-row)>td {
  background: #bbbbff;
}
//鼠标移入样式
.ant-table-tbody>tr:hover>td {
  background: #bbbbff !important
}

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐