Vue2_element 表头查询功能

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"borderheight="calc(100vh - 200px)"style="width: 100%">// 表头查询-输入框<el-table-columnlabel="项目定义"align="center"prop="projectCode"><template slot="header" slot-scope="scope"><div class="table-header-filter"><span>项目定义</span><el-popoverplacement="bottom"title="请输入"width="200"trigger="click"><span slot="reference" class="search-header"><i class="el-icon-search" size="mini"></i></span><el-inputv-model="queryParams.projectCode"placeholder="请输入项目定义"size="mini"[e-mail]="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-popoverplacement="bottom"title="请选择"width="200"trigger="click"><span slot="reference" class="search-header"><i class="el-icon-search" size="mini"></i></span><el-selectv-model="queryParams.bomType"size="mini"clearableplaceholder="请选择自制/外购"@keyup.enter.native="handleQuery"><el-optionv-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-columnlabel="发货时间"align="center"prop="shipmentDate"><template slot="header" slot-scope="scope"><div class="table-header-filter"><span>发货时间</span><el-popoverplacement="bottom"title="请选择"width="200"trigger="click"><span slot="reference" class="search-header"><i class="el-icon-search" size="mini"></i></span><el-date-pickerv-model="queryParams.shipmentDate"type="date"value-format="yyyy-MM-dd"placeholder="请选择发货时间"size="mini"[e-mail]="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},