Vue2 element 表头查询功能实现代码
作者：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 表头查询内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！