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、举例代码

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
    },
相关推荐
一斤代码2 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
3Katrina3 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
coderlin_4 小时前
BI布局拖拽 (1) 深入react-gird-layout源码
android·javascript·react.js
伍哥的传说4 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409194 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding4 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js
布兰妮甜4 小时前
Vue+ElementUI聊天室开发指南
前端·javascript·vue.js·elementui
SevgiliD4 小时前
el-button传入icon用法可能会出现的问题
前端·javascript·vue.js
我在北京coding4 小时前
Element-Plus-全局自动引入图标组件,无需每次import
前端·javascript·vue.js
鱼 空4 小时前
解决el-table右下角被挡住部分
javascript·vue.js·elementui