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)=>{
键盘点击的事件
debugger
let  a= param
alert('键盘的回车事件');
}
/**
keyup.enter.native:{
alert('键盘的回车事件！');
}**/
}
},'')
]
)
}
}
}
运行的结果：