element-ui表格使用jsx创建自定义列

Posted 2023-05-18

参考技术A 参考文章: 使用jsx配置element-ui的table - SegmentFault 思否

element ui 文档说明(详见:formatter属性说明): 组件 | Element

封装element-ui的table自定义表头组件

参考技术A 里面的数据没有走真实接口，是模拟的数据，但是接口是真调了，用的豆瓣的api，所以如果发现接口出错，请检查配置项。由于数据是模拟的，所以后边的请求用的都是假数据，用loading来表示走了请求，方便理解。

（1）按字段选择表格需要展示的字段
（2）自定义表头，表头支持时间，input，select，类型的搜索过滤
（3）支持操作选项，可以增删改等

（1）如果是日期范围的话，那个日期框必须的设置的大点，不然就会像效果图一样，选择的日期显示不全，虽然不是大问题，但是应该可以改进吧。其实只要把日期字段那列的宽度设置大点就可以解决这个问题。
（2）关于render函数，这块应该还可以优化，render重新渲染。

github项目地址： https://github.com/Amosyue/hyTable