【React_Antd】Table样式修改

React项目中，使用antd中的Table组件，其样式略有些死板。下面记录一些常见的样式修改问题，及解决方法。

一共有三种方法。

React定义columns的时候，title属性的值，可以是dom。所以在这儿添加div就可以了。其样式会覆盖table原本的背景。

扣一张矩形的背景透明的斜线图片出来，作为表头所在div的背景。这样，当表头所在div发生变化时，背景图片也会随着变化。

缺点 ：

线的粗细也会发生变化。变化幅度小时不明显，如果拉得特别大，线会变粗，像素可能会不够。

其他 ：

Svg图片不知道可不可以。。。

建议从这里抄作业：https://blog.csdn.net/weixin_42304808/article/details/106352850

注意每个属性的后面有逗号，颜色自己改

直接对背景div添加斜线，上层要显示的内容，做好排版即可

如果表头有两个，那么也可以看成是4个拼在一起

第2和第3块显示内容，第1和第4块显示斜线，也可以

直接一个div，高度设为1px，你就能得到一条直线了（也可以把div的某一条border边框作为直线)。通过css中的旋转属性，即可得到斜线。

每个column，利用其title.length*18+20作为其width值，每一列的宽度都能自适应其表头字数。

但是如果要让列宽适应于非表头部分，可能还要另想办法

Scollar属性中的x设置为＂max-content＂

每一列width根据title长度动态生成

Scollar属性中的y设置为true，再在样式文件中，设置其max-height。

这样做的好处是，max-height的大小可以根据其父组件的高度自适应。适用于某些情况

从后来请求的表格数据样例

0，最正常的显示，一个字段一个列，title定义显示名，dataIndex和字段对应。

1，在表格同一列中，显示样本总数，负样本数及正样本数，此时，dataIndex已无意义，没用。

关于下面的customRender()函数，一个，两个，三个参数的意义，我没有系统的看到过，所以每次使用时，console.log()显示后，再提取要的数据。不专业~~~

3，在同一列中，显示样本数据的起止时间

3，在一个列中不但显示数据，还使用tip显示额外信息

return多行，维护性不太好，需要使用第4点改进

4，scopedSlots结合customRender，作更优雅从容的自定义样式或 *** 作

columns里的定义

table里的定义，感觉有些模糊了div和template标签的用法，没有进一步探究，但效果一样。

对于label和content的宽度，我们想着table中每一行中每一个td可以设置百分比的宽度，总和为100%即可

有时设置width不起作用。加上 display:table-cell；

设置width并超出显示省略号，官网给出讨论 https://github.com/ant-design/ant-design/issues/13825

当书写render时，当此列没有key值时，render的参数为(record),当有key值时，render的参数为(text,render)

官网给出的行选中

常用写法：

单选的时候,可简化handleRowClick：

上述选中的可以显示为20，只在下拉选项时添加“页/条”

问题描述：

最后一列为 *** 作列，固定在最右边，随着项目复杂，从3个 *** 作增加为4个了，然后紧跟在 *** 作列前面的一列筛选列的筛选图标被遮挡了，不明白为啥。。。。？

问题解决：最终发现，是只给 *** 作增加了内容，没有增加 *** 作列的宽度导致的，所以增加 *** 作列的宽度到合适即可。

一般都是除了导航和查询的地方，剩下的地方container全部是table的，此时洗完滚动根据container的高度自适应变化而调整，而且不滚动时，分页在页面最底部,此时需要增加样式：

将table配置中 scroll: { y: 'calc(100% - 46px)' } ,46是因为每行高是46

此时左或右固定时滚动会出现错位，增加样式：

每个formitem中只能写一个校验

参见例子 一行写两个

Row一行，Col两个即两列总共24

上述选中的可以显示为20页/条

描述一个自己思路转不过来的坑-----

问题描述：

往往optionDatas是一个对象数组，同时，显示的是text，value是一个id之类的值，但是在选中值后，我们某时会需要取得选中的这条数据中的其他值如params，此时，思路需要转坑---value可以改，

value={index} , handleChange 时，选中的 params 为 optionDatas[index].params

（复杂(或者多个select时）时可以使用 value={ {index} } ，此时split('-')可以拿到id和index。）

Dropdown的menu是一个组件时，点击item之后，下拉框并不会自动收起，解决办法，Dropdown和menu写在一个组件中。

---