el-table表头添加搜索

案例图：

思路：
        添加一个插槽，是用popover组件展示input搜索框，在按下回车键时关闭popover组件且调用查询方法。
部分代码(HTML)：

1. <template #header >
2.        {{item.label}}
3.       <el-popover :visible="item.visible" placement="top" :width="160"  :ref="`popover-${index}`" v-if="item.label=='操作类型'">
4.          <el-input v-model="input"  placeholder="请输入搜索条件"   @keydown.enter="changeData($event,index)"/>
5.          <template #reference>
6.            <el-button  circle class="buttonIcon"><el-icon @click="Ones(item,index)"><Search /></el-icon></el-button>
7.          </template>
8.        </el-popover>  
9.       </template>

复制代码

 
JavaScript：

1. Ones (val,index) {
2.       console.log(val, "val",index)
3.       this.tableHeader[index].visible=!this.tableHeader[index].visible
4.     },
5.    
6.     /**
7.      * 回车事件
8.      */
9.      changeData(event,index) {
10.        if (!event.ctrlKey) {
11.          // 如果没有按下组合键ctrl，则会阻止默认事件
12.          event.preventDefault();
13.          this.test(index);
14.        } else {
15.          // 如果同时按下ctrl+回车键，则会换行
16.          this.orderInfo += '\n';
17.        }
18.      },
19.      // 测试事件
20.      test(index){
21.        console.log('触发了回车事件，并且没有换行喔~');
22.        this.tableHeader[index].visible=!this.tableHeader[index].visible
23.       //  下面可以写方法。。。
24.      },

复制代码

 

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。