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、举例代码
javascript
<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>
javascript
//查询方法
handleQuery() {
this.queryParams.pageNum = 1; //分页初始化
this.getList(); //表格数据function
},