1. 程式人生 > >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)=>{
      鍵盤點選的事件
              debugger
           let  a= param
        alert('鍵盤的回車事件');
      }
      /**
      keyup.enter.native:{
        alert('鍵盤的回車事件!');
      }**/
    }
    },'')
       ]
    )
  }
  }
}
執行的結果:

在這裡插入圖片描述