VUE 自定义表头实现table的过滤功能

本文主要是介绍VUE 自定义表头实现table的过滤功能，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

  html代码

   下面是table<el-table-column v-for="(data,index) in mydata" //下面调用的是自定义的函数:render-header="myHead"></el-table-column>

 **js代码：**

 export default{methods: {
下面是自定义 的事件
myHead(h, { column, $index }) {debugger;return h('span', {class: 'table-head', style: {width: '100%','text-align': 'center'}}, [h('span', {}, column.label),h('el-input', { style:{ width: '100%'},//主要1，这里必须是nativeOn 不能是on ，on的时候监听不到事件nativeOn: {//鼠标点击的事件click: () => {//点击确认按钮的事件alert('确定');},keyup:(param)=>{键盘点击的事件debuggerlet  a= paramalert('键盘的回车事件');}/**keyup.enter.native:{alert('键盘的回车事件！');}**/}},'')])}}
}
运行的结果：

这篇关于VUE 自定义表头实现table的过滤功能的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---