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

1、组件效果图

封装element-ui的table自定义表头组件_第1张图片
table.gif

2、组件说明

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

3、组件功能

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

4、暂时缺陷

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

5、项目地址

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

你可能感兴趣的:(封装element-ui的table自定义表头组件)