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"
      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
    },