antd(antd使用)

编程之家2023-11-0773次浏览

亲爱的读者们，你是否对antd和antd使用的相关问题感到困惑？别担心，今天我将为你解答这些问题，让你对此有更清晰的认识。

工作中使用antd需要对其样式进行一些修改，一开始以为直接在组件上加入className就好，但发现在好的情况下完全不可取，问了对这个比较熟悉，恍然大悟，记录下来，映像好点

修改样式无法两种情况，全局样式修改，局部样式修改

下面我就已一个按钮组件为例子来写个demo

特点：虽然你是在当前目录下的less或css文件修改了，但是全局生效的，建议如果有全局修改的需求，放到global.less的文件中修改，并做好注释。

如：我这边修改按钮组件的样式

注意：这里就要提到css modules的一个类名加载机制了，上面应该看到了，最外层有个类为 lqDemo，因为css modules的机制是，如果你不使用它，那就不会进行加载。所以无论如果需要在外面加上一个class类，进行使用，否则仅仅引用是不会生效的

这个时候就需要用到css的作用域了

像这样嵌套在:global下就好了

哈哈哈是不是就解决了，其实还有其它的方式，但我觉得这种方式是最好的

对于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写在一个组件中。

文章分享到这里，希望我们关于antd的内容能够给您带来一些新的认识和思考。如果您还有其他问题，欢迎继续探索我们的网站或者与我们交流，我们将尽力为您提供满意的答案。