VUE 自定義表頭實現table的過濾功能
阿新 • • 發佈:2018-11-05
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('鍵盤的回車事件!'); }**/ } },'') ] ) } } } 執行的結果: