element-ui中用jsx实现自定义表头

前段时间项目（vue+element-ui）中需要两个表格，且都需要查询功能；为了不使查询占用太多空间，于是想到在操作栏上方加上搜索。看了下element-ui文档，果然就有自定义表头，于是把插槽代码撸下来...

element-ui文档

element-ui文档

but,放上去咋没用，表头的搜索框咋出不来（刚开始以为文档有问题，不过后面单独放一个html页面里又能出来，但也还不知道原因），哎，又得折腾一下了，那是项目催的紧！！！。

于是，网上搜索了一番，看到也有另外的方法自定义表头：

1. createElement函数（即element-ui中render-header回调中的h），vue文档中也提到过。

2. 使用jsx语法：react中的jsx语法，vue中也支持了，最终选择了jsx语法，看起来更简洁易懂。

     但得安装两个插件： 

1. babel-plugin-transform-vue-jsx  vue中转换jsx语法  

2. babel-plugin-jsx-v-model  让jsx支持v-model 语法

另外，都需要在.babelrc文件中进行相应配置，如图

完成后代码：（期间还有@change与on-change写法问题，用on-change才行）

刷新一看，查询框确实出了，又试了下实时查询，what，咋没change后的效果，检查代码unMatchInputChange加上（）调用，又试了下，这次果然有效果了（也是哦，react中确实要（）），开心！！！

打开控制台，想看下节流效果咋样，妈哟，咋还没输入，接口就在疯狂的调，这是咋回事？？？

是（）调用的原因？去掉后，又没有实时查询的效果，只有按enter键才开始调（当时记得输入框失去焦点也调了，但当时没注意这个问题）。

又各种试了半天，期间出现vue warn：You may have an infinite update loop in a component render function警告。于是粘贴vue warn到百度搜索了一番，看到一篇文章说是由于jsx在渲染期间改变了组件的状态值，触发了无限渲染，unMatchInputChange也就无限调用了。想到是不是改变timer了，把timer不放组件data里了，but还是一样疯狂的调用，头疼啊，眼看到下班点了，又得加班了。。。

晚上带上耳机，静下心来继续弄了会，无果。。。bug虐我千百遍，我待bug如初恋。。。

第二天上午，这个问题先放了会。下午继续程序猿的搜索大法，也没看到太多相关的内容，但偶然看到一篇说element-ui中input的change事件是失去焦点后才触发的，input事件（文档中都没提到）才是输入值改变就触发，立马试了下（去掉了（）调用），这次确实可以了，控制台也不在疯狂请求了。解决了这个鬼bug，心情瞬间轻松多了。。。，代码如下：

but，难道我是被ele文档坑的这久吗？？？看了下input组件change说明，change个屁，input事件咋也没有（element-ui确实有一些坑）：

element-ui文档

想了下，也是我原生oninput与onchange没搞清楚的问题，一直错误的认为只有change事件，且在输入值改变时触发。

菜鸟教程

mdn文档

通过这次也感受到，有时候一些bug，通常是由于我们一些基础的知识点的遗漏造成的，所以debug的时候得仔细了。