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

最新推荐文章于 2024-09-05 11:20:10 发布

柳牧之

最新推荐文章于 2024-09-05 11:20:10 发布

阅读量5.7k

点赞数

文章标签： vue 表头过滤 table 过滤

本文链接：https://blog.csdn.net/u012976879/article/details/83510161

版权

  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('键盘的回车事件！');
      }**/
    }
    },'')
       ]
    )
  }
  }
}
运行的结果：

在这里插入图片描述