antd-table：通过rowClassName实现斑马条纹样式+通过rowSelection实现单选功能效果——基础积累

斑马条纹

对于element-ui是有个stripe斑马条纹的属性的，最终呈现的效果如下：

antd-table中是没有这个属性的，但是可以通过rowClassName：可以给对应行添加指定类名。

实现方法：

<a-table
  :rowClassName="getRowClassName"
  size="small"
  :dataSource="tableData"
  :rowKey="(row) => row.id"
  bordered
  :scroll="{ y: 430 }"
  :pagination="false"
  :columns="columns"
></a-table>

getRowClassName(row,index){
	if (index % 2 == 0) {
        return 'evenCls';
      }
}

/deep/.ant-table-body > table > .ant-table-tbody > tr.evenCls > td {
  background: #fff9e6;
}
/deep/.ant-table-body > table > .ant-table-tbody > tr:hover > td {
  background: #fff;
}

最终效果图：

单选——最简单的方式

<a-table
  style="margin-top: 10px"
  :dataSource="tableData"
  :rowKey="(row) => row.id"
  :scroll="{ x: 1000, y: 500 }"
  bordered
  :pagination="pagination"
  @change="changeTable"
  :columns="columns"
  :row-selection="{
    selectedRowKeys: selectedRowKeys,
    onChange: onSelectChange,
  }"
></a-table>

onSelectChange(selectedRowKeys) {
 this.selectedRowKeys = selectedRowKeys;
},

完成！！！