element-ui的table组件有几个属性很好用，但是ant-design中table组件是没有的。

比如： 

stripe： 是否为斑马纹 table。

highlight-current-row： 是否要高亮当前行。

当然，还有好几个其他的属性，但是本文先只讲这两个。既然element-ui有，ant-design没有，那我在用ant-design的table组件时，想要实现这两个功能怎么办？

答案是凉拌。既然它没有，那就自己写，也就是二次封装。

ok，先来实现这个属性的功能：highlight-current-row。

首先，当然是给定义prop变量：highlightCurrentRow；再定义一个另外一个prop变量currentRow。

然后在watch中监听currentRow的变化，每次当currentRow变化的时候，渲染一下上一个选中行和当前选中行的样式。

highlightCurrentRow为true的时候，才需要渲染新的样式。

renderRowStyleAfterRowClick：

代码其实很简单：

先拿表格当前页的所有row元素（table组件没有提供当前点击行的原生class）和当前选中row元素。

如果当前有选中的行，先移除这个之前添加过的css class 'row-selection'。

然后再给当前选中行添class 'row-selection'。

那个这里就有疑问了，我怎么样才能找到当前行呢？table组件并没有提供当前选中行的class（至少我没有找到），所有我只能t通过class name 'ant-table-row' 拿到所有row, 然后再从中找出你当前点击的那一行。

这个时候需要利用一个很关键的属性： rowKey。

还记得ant-design table组件的api文件最后面的那个注意吗？

这里提醒你，rowKey用来指定数据列的住建，也就是每一行的唯一标志，那么好办了 。

我们引用table组件的时候，将rowKey设置为表格数据源的主键，这样我们就能从元素中的dataset中获取到rowKey，然后找出当前点击行。

然后给这个元素动态添加class ‘'row-selection’。

这里设置hover时行样式和点击时行样式一样，是为了不让行点击后，该行悬停时，出现其他不一样的样式。如果不想设置成一样，可以单独设置行点击时的hover样式和行点击时的样式一样。

这样，我们的目的就达到了。

在行点击时，修改currentRow，table组件内部通过watch监测到currentRow的变化，就会触发改变样式的方法。

这样就可以了。

实现行的stripe功能，还是比较简单的。

添加prop 变量 stripe， 在组件的update函数钩子内，调用实现斑马纹的方法就可以了

 实现斑马纹的方式有多种，这里只展示期中一种：

获取到table的所有行，然后对其进行隔行设置不一样的行背景色，目的就达到了。

有其他更多方式的朋友欢迎补充。