antd中List组件的使用技巧

1,工具:VS code + Google chrome

2,React+dva+antd

List 顾名思义就是列表,和table组件相似,但也不同。首先看下效果;

antd中List组件的使用技巧_第1张图片
list是没有表头的

第一步看antd官网的例子,这一步只要查看antd代码就可以做出来,关键在于content的内容怎么填充,通过源代码可以发现content是个div;这样的话就好办了,div里可以填充任何东西,而我们要做的只剩下调整样式。

antd中List组件的使用技巧_第2张图片
antd官网的例子

第二步,调整样式。直接贴代码在解释吧。相信大家都看得懂了,那就这样吧。当然应该还有更好的方法,但是我还没学到。

antd中List组件的使用技巧_第3张图片

你可能感兴趣的:(antd中List组件的使用技巧)