Vue2 element 表头查询功能实现代码
更新时间：2025年07月12日 11:00:17 作者：Rainbow_Pearl
本文介绍Vue2中Element UI表格自定义表头及查询功能实现,需通过slot-scope绑定数据,注意Vue2.6+版本改用#header语法,并提供示例代码说明,感兴趣的朋友一起看看吧
1、效果图（输入框 / 下拉框 / 日期选择器 查询）
2、备注
1、tableData 是表格内容的数组；
2、<template slot="header"></template> 自定义表头的内容；
3、注意：在使用 <template slot="header"></template> 的时候，只会显示表头的自定义内容，表格的内容还需要使用<template slot-scope="scope"> {{ scope.row }} </template> scope.row会显示出该列的所有内容；
3、如果 <template slot='header'></template> 不使用 slot-scope='scope' 会出现不能输入的问题；
4、Vue 2.6+ 版本的插槽语法使用 #header 替换 <template slot='header' slot-scope='scope'></template>；
3、举例代码
<el-table
:data="orderList"
border
height="calc(100vh - 200px)"
style="width: 100%"
>
// 表头查询-输入框
<el-table-column
label="项目定义"
align="center"
prop="projectCode"
>
<template slot="header" slot-scope="scope">
<div class="table-header-filter">
<span>项目定义</span>
<el-popover
placement="bottom"
title="请输入"
width="200"
trigger="click"
>
<span slot="reference" class="search-header">
<i class="el-icon-search" size="mini"></i>
</span>
<el-input
v-model="queryParams.projectCode"
placeholder="请输入项目定义"
size="mini"
clearable
@keyup.enter.native="handleQuery"
/>
<div style="text-align: right; margin-top: 5px">
<el-button type="primary" size="mini" @click="handleQuery"
>搜索</el-button
>
</div>
</el-popover>
</div>
</template>
<template slot-scope="scope">
{{ scope.row.projectCode }}
</template>
</el-table-column>
// 表头查询-下拉框
<el-table-column label="自制/外购" align="center" prop="bomType">
<template slot="header" slot-scope="scope">
<div class="table-header-filter">
<span>自制/外购</span>
<el-popover
placement="bottom"
title="请选择"
width="200"
trigger="click"
>
<span slot="reference" class="search-header">
<i class="el-icon-search" size="mini"></i>
</span>
<el-select
v-model="queryParams.bomType"
size="mini"
clearable
placeholder="请选择自制/外购"
@keyup.enter.native="handleQuery"
>
<el-option
v-for="(item, index) in bomTypeList"
:key="index"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
<div style="text-align: right; margin-top: 5px">
<el-button type="primary" size="mini" @click="handleQuery"
>搜索</el-button
>
</div>
</el-popover>
</div>
</template>
<template slot-scope="scope">
<dict-tag :options="bomTypeList" :value="scope.row.bomType" />
</template>
</el-table-column>
// 表头查询-日期选择器
<el-table-column
label="发货时间"
align="center"
prop="shipmentDate"
>
<template slot="header" slot-scope="scope">
<div class="table-header-filter">
<span>发货时间</span>
<el-popover
placement="bottom"
title="请选择"
width="200"
trigger="click"
>
<span slot="reference" class="search-header">
<i class="el-icon-search" size="mini"></i>
</span>
<el-date-picker
v-model="queryParams.shipmentDate"
type="date"
value-format="yyyy-MM-dd"
placeholder="请选择发货时间"
size="mini"
clearable
@keyup.enter.native="handleQuery"
style="width: 100%"
/>
<div style="text-align: right; margin-top: 5px">
<el-button type="primary" size="mini" @click="handleQuery"
>搜索</el-button
>
</div>
</el-popover>
</div>
</template>
<template slot-scope="scope">
{{ scope.row.shipmentDate }}
</template>
</el-table-column>
</el-table>
//查询方法
handleQuery() {
this.queryParams.pageNum = 1; //分页初始化
this.getList(); //表格数据function
},到此这篇关于Vue2 element 表头查询功能的文章就介绍到这了,更多相关vue element 表头查询内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
Dialog通常是指在Vue.js 3.x版本中使用的对话框组件,它是一个轻量级、易集成的弹窗插件,用于创建通知、确认消息、输入表单等交互场景,最近项目中遇到了全局挂载Dialog的需求,所以本文给大家介绍了Vue3全局挂载Dialog组件的方法,需要的朋友可以参考下2024-12-12
这篇文章主要介绍了vue中标签自定义属性的使用及说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
Vuejs第一篇之入门教程详解（单向绑定、双向绑定、列表渲染、响应函数）
组件（Component）是 Vue.js 最强大的功能之一。接下来给大家介绍vuejs单向绑定、双向绑定、列表渲染、响应函数的相关知识，非常不错，感兴趣的朋友一起看看吧2016-09-09
这篇文章主要介绍了Vue 自定义指令实现元素拖动,在使用自定义指令之前，先对自定义指令有一定的了解，主要从自定义指令定义范围，钩子函数方面入手，需要的朋友可以参考下2022-01-01
这篇文章主要为大家介绍了Vue3+Element Plus的项目搭建过程详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-08-08
这篇文章主要介绍了这15个Vue指令,让你的项目开发爽到爆，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-10-10
Vue3 使用v-model实现父子组件通信的方法(常用在组件封装规范中)
这篇文章主要介绍了Vue3 使用v-model实现父子组件通信(常用在组件封装规范中)的方法,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧2024-06-06
这篇文章主要介绍了Vue.js axios响应拦截如何获取返回状态码问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
在现代Web应用中,用户登录功能是一个核心模块,它不仅涉及到用户身份验证,还需要处理表单验证、状态管理、接口调用等多个环节,本文将基于一个Vue.js项目中的登录功能实现,深入解析其背后的技术细节,帮助开发者更好地理解和实现类似功能,需要的朋友可以参考下2025-02-02
Luckysheet 在vue中离线使用及引入报错的解决方案(推荐)
这篇文章主要介绍了Luckysheet 在vue中离线使用方法及引入报错的解决方案,将dist离线包在项目创建个文件夹放着，然后根据放置的位置在 index.html里面引入，下面通过案例给大家介绍我的项目里面放置的位置，需要的朋友可以参考下2022-10-10
最新评论