React + Antd 中 BTable组件的包装与使用
在写代码的过程中,代码崽一直复制粘贴,会手酸。
有时候,就会把一些过于重复、啰嗦,反复复制的代码,包装一下,省的代码太过于啰嗦。
比如BTable。
B表格,
![6101a888a7f2bcd0f81b0773088cf3c5.png](https://i-blog.csdnimg.cn/blog_migrate/d9f341e928793a51c9cfd8eaf64f7e41.png)
首先,这个表格,是从业务中抽离出来的,一个数据表格的页面,一般有啥呢?
查询、双击看详情。
好,那就这样做,utils里搞一些工具函数
![3994010a7f6de7561649ed0d21b0ecd1.png](https://i-blog.csdnimg.cn/blog_migrate/07fcc8a84695f40c149383029ad51e2b.png)
比如这个,一个表格,必然要定义一些column,列名吗,每个表格,可能有不同的列,所以这个是动态传入的。
![5f946896071ad50f60d7890dc9e842f7.png](https://i-blog.csdnimg.cn/blog_migrate/1322a9ed2cf93d1302339b7b0864563e.png)
然后,这个B表,是可以多种方式呈现的。比如
你需要一个自定义分页的B表,那可以满足你。你传入分页需要的参数就行了。
如果你需要自动分页的不自定义分页的B表,那好,
你不传入分页参数就行了。这个和antd的Table,是类似的。所以B表也支持了这个热插拔的配置。
然后这个B表还要支持一下,点击一行变颜色
![56f2346ac826cf007de7a705a41d108c.png](https://i-blog.csdnimg.cn/blog_migrate/53aa885b42b9967afade0c8ddf22667f.png)
双击的事件,可以自定义,不传自定义的,那么就默认使用双击弹窗。
![23d56e2e6b2de9bf2205619cb8a0aa99.png](https://i-blog.csdnimg.cn/blog_migrate/1b3b187e1c76c6394f9d40f9dff40157.png)
其实还是蛮复杂的。