Vue2 element 表頭查詢功能實現(xiàn)代碼

更新時間：2025年07月12日 11:00:17 作者：Rainbow_Pearl

本文介紹Vue2中Element UI表格自定義表頭及查詢功能實現(xiàn),需通過slot-scope綁定數(shù)據(jù),注意Vue2.6+版本改用#header語法,并提供示例代碼說明,感興趣的朋友一起看看吧

1、效果圖（輸入框 / 下拉框 / 日期選擇器查詢）

2、備注

1、tableData 是表格內(nèi)容的數(shù)組；

2、<template slot="header"></template> 自定義表頭的內(nèi)容；

3、注意：在使用 <template slot="header"></template> 的時候，只會顯示表頭的自定義內(nèi)容，表格的內(nèi)容還需要使用<template slot-scope="scope"> {{ scope.row }} </template> scope.row會顯示出該列的所有內(nèi)容；

3、如果 <template slot='header'></template> 不使用 slot-scope='scope' 會出現(xiàn)不能輸入的問題；

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="發(fā)貨時間"
        align="center"
        prop="shipmentDate"
      >
        <template slot="header" slot-scope="scope">
          <div class="table-header-filter">
            <span>發(fā)貨時間</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="請選擇發(fā)貨時間"
                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(); //表格數(shù)據(jù)function
    },

到此這篇關(guān)于Vue2 element 表頭查詢功能的文章就介紹到這了,更多相關(guān)vue element 表頭查詢內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: