ant-design-vue 表格组件 - 行选中效果

ant-design-vue

table 组件点击某行实现选中行改变样式效果

由于 ant-design-vue 组件库并没有相关选中样式（我粗略地找了一下，没找到~）

思路：

1. 使用 增删类名（row-selection） 的方式来使点击行样式（如：.ant-table-row.row-selection { background-color: #4ec4fa; }）不同于其他行即可；
2. 点击某行(由 customRow 去绑定方法)，就存下这一行的数据到 selectItem (名字随意)，通过 watch 监听它的变化，只要它一变化，就去运行渲染行样式的函数 renderRowStyle (也随你定义)，并将存的数据值传递过去；
3. 在 renderRowStyle 函数中，先取到表格 body 的所有行 document.getElementsByClassName('ant-table-row') （如果有多个表格，可在对应的上下文(context)下获取行，避免获取另外一些不必要的行数据）；
4. 通过类名 row-selection 获取是否有已被选中状态的行，有则移除此类名，无则跳过；
5. 匹配点击行，添加类名即可。

具体实现代码如下：

另外一个注意点是：在 ant-design-vue table组件文档的最后有两句话，在后面会用到：

在 Table 中，dataSource 和 columns 里的数据值都需要指定 key 值。对于 dataSource 默认将每列数据的 key 属性作为唯一的标识。
如果你的数据没有这个属性，务必使用 rowKey 来指定数据列的主键。若没有指定，控制台会出现缺少 key 的提示，表格组件也会出现各类奇怪的错误。

也就是说指定的 key 值会为每一行加上 data-row-key="xx" 属性保证 table 组件每行的唯一性，这也是可以作为校验点击行与

<!-- 此处仅书写相关操作的参数 -->
<template>
    <a-table
        :currentRow