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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了封装element-ui的table自定义表头组件相关的知识,希望对你有一定的参考价值。

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

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

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

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

以上是关于封装element-ui的table自定义表头组件的主要内容,如果未能解决你的问题,请参考以下文章

element-ui自定义table表头,render-header使用

Element ui table组件slot自定义表头,数据无法响应刷新

Element-UI实现复杂table表格结构

element-ui 中表格嵌套表单 如何给table表头添加必填*星号

element-ui 中表格嵌套表单 如何给table表头添加必填*星号

关于自定义的element-ui表单组件的校验