基于elementUI表头筛选组件封装

引用方式

推荐main.js里全局引用：

import ElTableColumnPro from './components/ElTableColumnPro.vue';
ElTableColumnPro.install = function(Vue) {
 Vue.component(ElTableColumnPro.name, ElTableColumnPro);
};
Vue.use(ElTableColumnPro);

然后引用页面直接在标签下添加，具体各种类型的筛选自行根据类型添加相应格式，以下为input类型

<el-table-column-pro
  :width="160"
  prop="AssetCode"
  label="设备编号 "
  align="center"
  header-align="center"
  placeholder="请输入设备编号"
  :callback="getTableDatas"
  renderType="input"
  :param.sync="AssetCode"
>
  <template #content="scope">
    <div class="text-center">
      <router-link
        :to="{ name: '资产管理详情', query: { id: scope.row.Id }}"
      >{{scope.row.AssetCode}}</router-link>
    </div>
  </template>
</el-table-column-pro>

ElTableColumnPro.vue

<template>
  <el-table-column
    v-if="visible"
    :formatter="formatter"
    :align="align"
    :prop="prop"
    :header-align="headerAlign"
    :label="label"
    :width="width"
  >
    <template v-slot:header="slotProps">
      <!-- input -->
      <div v-if="renderType==='input'">
        <span>&#123;&#123;label&#125;&#125;</span>
        <el-popover v-model="popover" placement="bottom" width="220" trigger="click">
          <div class="d-flex">
            <el-input size="mini" :placeholder="placeholder" v-model="value" :clearable="isClear"></el-input>
            <div class="search-popver">
              <el-button type="primary" size="mini" @click="emitChange" icon="el-icon-search"></el-button>
            </div>
          </div>
          <i slot="reference" class="cursor-point" :class="param?'filtered-color '+icon:icon"></i>
        </el-popover>
      </div>
      <!-- select -->
      <div v-if="renderType==='select'">
        <span>&#123;&#123;label&#125;&#125;</span>
        <el-popover v-model="popover" placement="bottom" width="200" trigger="click">
          <div class="d-flex">
            <el-select
              size="mini"
              v-model="value"
              placeholder="请选择"
              filterable
              :clearable="isClear"
            >
              <el-option
                v-for="(item,index) in selectList"
                :label="item.name"
                :value="item.value"
                :key="index"
              ></el-option>
            </el-select>
            <div class="search-popver">
              <el-button type="primary" size="mini" class="el-icon-search" @click="emitChange"></el-button>
            </div>
          </div>
          <i slot="reference" class="cursor-point" :class="param?'filtered-color '+icon:icon"></i>
        </el-popover>
      </div>
      <!-- Cascader -->
      <div v-if="renderType==='cascader'">
        <span>&#123;&#123;label&#125;&#125;</span>
        <el-popover v-model="popover" placement="bottom" width="200" trigger="click">
          <div class="d-flex">
            <el-cascader
              v-model="value"
              size="mini"
              placeholder="请选择"
              clearable
              :options="selectList"
              :props="defaultProps"
              :show-all-levels="false"
            ></el-cascader>
            <div class="search-popver">
              <el-button type="primary" size="mini" class="el-icon-search" @click="emitChange"></el-button>
            </div>
          </div>
          <i slot="reference" class="cursor-point" :class="param?'filtered-color '+icon:icon"></i>
        </el-popover>
      </div>
      <!-- datetimerange -->
      <div v-if="renderType==='datetimerange'">
        <span>&#123;&#123;label&#125;&#125;</span>
        <el-popover v-model="popover" placement="bottom" width="430" trigger="click">
          <div class="d-flex">
            <!-- <el-input size="mini" :placeholder="placeholder" v-model="value" :clearable="isClear"></el-input> -->
            <el-date-picker
              size="mini"
              :placeholder="placeholder"
              v-model="value"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :clearable="isClear"
            ></el-date-picker>
            <div class="search-popver">
              <el-button type="primary" size="mini" @click="emitChange" icon="el-icon-search"></el-button>
            </div>
          </div>
          <i slot="reference" class="cursor-point" :class="param?'filtered-color '+icon:icon"></i>
        </el-popover>
      </div>
    </template>
    <template v-slot="scope">
      <slot name="content" :row="scope.row">&#123;&#123;scope.row[prop]&#125;&#125;</slot>
    </template>
  </el-table-column>
</template>

<script>
export default &#123;
  name: "el-table-column-pro",
  props: &#123;
    prop: &#123;
      type: String
    &#125;,
    label: &#123;
      type: String
    &#125;,
    width: &#123;
      type: Number
    &#125;,
    renderType: &#123;
      type: String,
      validator: value =>
        ["datetimerange", "input", "select", "cascader"].includes(value)
    &#125;,
    placeholder: &#123;
      type: String
    &#125;,
    rederWidth: &#123;
      type: String,
      default: "230px"
    &#125;,
    param: &#123;
      type: [String, Number, Array],
      default: ""
    &#125;,
    startDate: &#123;
      type: String
    &#125;,
    endDate: &#123;
      type: String
    &#125;,
    selectList: &#123;
      type: Array
    &#125;,
    defaultProps: &#123;
      type: Object
    &#125;,
    isClear: &#123;
      type: Boolean,
      default: true
    &#125;,
    visible: &#123;
      type: Boolean,
      default: true
    &#125;,
    filterIcon: &#123;
      type: String,
      default: "el-icon-search"
    &#125;,
    callback: &#123;
      type: Function
    &#125;,
    formatter: &#123;
      type: Function,
      default: (row, cellValue) => cellValue
    &#125;,
    align: &#123;
      type: String
    &#125;,
    headerAlign: &#123;
      type: String
    &#125;
  &#125;,

  data() &#123;
    return &#123;
      icon: this.filterIcon,
      value: this.param,
      popover: false
    &#125;;
  &#125;,

  methods: &#123;
    emitChange() &#123;
      this.$emit("update:param", this.value);
      this.callback();
      this.popover = false;
    &#125;,
    fomatMethod(value) &#123;
      return this.formatter("", "", value);
    &#125;
  &#125;
&#125;;
</script>
<style lang="less" scoped>
// table表头筛选颜色
.filtered-color &#123;
  color: var(--thFilterColor);
&#125;
</style>