antd table组件点击表格行变色，单双行颜色不同

故事与九

已于 2022-07-06 13:50:58 修改

阅读量3.4k

点赞数

分类专栏： antd 前端文章标签：前端 vue

于 2022-07-06 13:43:16 首次发布

本文链接：https://blog.csdn.net/weixin_45653441/article/details/125638020

版权

前端同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

antd

7 篇文章 0 订阅

订阅专栏

项目需求，采用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
}