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 表头查询内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
在前端开发中,Vue.js 是一个非常流行的 JavaScript 框架,它以其简洁的语法和强大的响应式系统而闻名,然而,尽管 Vue 的响应式系统非常强大,但在实际开发中,开发者仍然可能会遇到数据不更新的问题,本文将深入探讨 Vue 数据不更新的常见原因,并提供详细的解决方案2025-03-03
关于vue的element-ui web端引入高德地图并获取经纬度
这篇文章主要介绍了关于vue的element-ui web端引入高德地图并获取经纬度,高德地图首先要去申请key和密钥,文中提供了部分实现代码和解决思路,感兴趣的朋友可以学习一下2023-04-04
这篇文章主要介绍了vue 使用vant插件做tabs切换和无限加载功能的实现，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
今天小编就为大家分享一篇VUE DEMO之模拟登录个人中心页面之间数据传值实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-10-10
这篇文章主要介绍了vue 实现走马灯效果，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-10-10
这篇文章主要介绍了vue+echarts动态更新数据及数据变化重新渲染方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-06-06
下面小编就为大家分享一篇vue2.0路由切换后页面滚动位置不变BUG的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
这篇文章主要给大家介绍了关于Vue插件从封装到发布的完整步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-02-02
虽然Vue.js作为一个现代化的前端框架,鼓励使用其自身的响应式机制来处理DOM操作,但在某些情况下,尤其是在需要维护旧系统的项目中,可能会遇到需要引入jQuery的情况,本文将详细讲解如何在Vue项目中引入jQuery,需要的朋友可以参考下2024-09-09
今天小编就为大家分享一篇在vue项目中引入高德地图及其UI组件的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
最新评论