element-plus的el-table自定义表头筛选查询

注意： 该篇仅仅给自定义表头加了筛选效果，完整封装看这篇
注意： 该篇仅仅给自定义表头加了筛选效果，完整封装看这篇
注意： 该篇仅仅给自定义表头加了筛选效果，完整封装看这篇

文章目录

• 一、效果
• 二、代码
• • 1. 代码可直接复制使用
• 三、问题
• • 1. 使用 el-popover 完成筛选框

一、效果

二、代码

1. 代码可直接复制使用

template>
  div class="page-view" @click="handleClickOutside">
    el-button @click="resetFilters">Reset Filters/el-button>
    el-table ref="tableRef" row-key="date" :data="filteredData" style="width: 100%">
      el-table-column prop="date" label="Date" sortable width="180" column-key="date" />
      el-table-column prop="name" label="Name" sortable width="180">
        template #header>
          div style="display: inline-block; align-items: center;">
            span>Name/span>
            el-icon ref="buttonRef" @click.stop="toggleNameFilter(buttonRef,'nameFilter')"
              style="cursor: pointer; margin-left: 10px;"
              :style="{color: searchDate.nameFilter ?'#007d7b':'#85888e'}">
              Filter />
            /el-icon>
          /div>
        /template>
        template #default="scope">
          span>{{ scope.row.name }}---/span>
        /template>
      /el-table-column>
      el-table-column prop="address" label="Address" width="300" />
      el-table-column prop="tag" label="Tag">
        template #header>
          div style="display: inline-block; align-items: center;">
            span>Tag/span>
            el-icon ref="buttonRef2" @click.stop="toggleNameFilter(buttonRef2,'tagFilter')"
              style="cursor: pointer; margin-left: 10px;"
              :style="{color: searchDate.tagFilter ?'#007d7b':'#85888e'}">
              Filter />
            /el-icon>
          /div>
        /template>
        template #default="scope">
          el-tag :type="scope.row.tag ==='Home'?'primary':'success'">{{ scope.row.tag }}/el-tag>
        /template>
      /el-table-column>
    /el-table>
    {{ visible }}
    pre>{{ searchDate }}/pre>
    el-popover :visible="visible" :virtual-ref="refName" placement="bottom" :width="'fit-content'">
      div>
        el-input v-if="showKey ==='nameFilter'" v-model="searchDate.nameFilter" placeholder=" 输入框 "
          @input="applyNameFilter" clearable style="margin-top: 10px; width: 150px;" />
        el-select v-if="showKey ==='tagFilter'" v-model="searchDate.tagFilter" placeholder="Select Tag"
          @change="applyTagFilter" clearable style="margin-top: 10px; width: 150px;">
          el-option label="Home" value="Home" />
          el-option label="Office" value="Office" />
        /el-select>
        div class="mt" style="text-align: right;">
          el-button type="info" link @click="cancelFilter">重置/el-button>
          el-button type="primary" link @click="searchFilter">筛选/el-button>
        /div>
      /div>
    /el-popover>
  /div>
/template>

script setup>
import { ref, computed, unref } from 'vue'

import { Filter } from '@element-plus/icons-vue'

import { ClickOutside as vClickOutside } from 'element-plus'
const buttonRef = ref()
const buttonRef2 = ref()
const popoverRef = ref()
const onClickOutside = () => {
  console.log(123);

  if (unref(popoverRef) && unref(popoverRef).popperRef) {
    unref(popoverRef).popperRef?.delayHide?.()
  }
}

const showKey = ref(undefined) 
const visible = ref(false) 
const refName = ref(null) 

const tableRef = ref() 
const searchDate = ref({
  nameFilter: undefined,
  tagFilter: undefined,
}) 



const resetFilters = () => {
  searchDate.value.nameFilter = undefined
  searchDate.value.tagFilter = undefined
  applyNameFilter()
  applyTagFilter()

  getData()
}


const toggleNameFilter = (ref, key) => {
  if (showKey.value !== key) {
    visible.value = false
    getData()
  }
  refName.value = ref
  showKey.value = key
  visible.value = !visible.value
}


const handleClickOutside = () => {
  
};


const cancelFilter = () => {
  searchDate.value[showKey.value] = undefined
  visible.value = false;
  getData()
}

const searchFilter = () => {
  visible.value = false;
  getData()
}


const applyNameFilter = () => {
  
}
const applyTagFilter = () => {
  
}


const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
    tag: 'Home',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
    tag: 'Office',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
    tag: 'Home',
  },
  {
    date: '2016-05-01',
    name: 'Jack',
    address: 'No. 189, Grove St, Los Angeles',
    tag: 'Office',
  },
]









const filteredData = ref(JSON.parse(JSON.stringify(tableData)))

const getData = () => {
  filteredData.value = tableData.filter((item) => {
    const nameMatch = searchDate.value.nameFilter ? item.name.toLowerCase().includes(searchDate.value.nameFilter.toLowerCase()) : true
    const tagMatch = searchDate.value.tagFilter ? item.tag === searchDate.value.tagFilter : true
    return nameMatch && tagMatch
  })
}
/script>

style lang="scss" scoped>
:deep(.el-popover) {
  width: fit-content !important;
}

:deep(.el-popover.el-popper) {
  width: fit-content !important;
}
/style>

三、问题

1. 使用 el-popover 完成筛选框

同时通过 :visible="visible" 来控制筛选框显隐，但是在 el-popover 下就不能使用 子元素 （如使用子元素，就没法将筛选框其定位到每个表头；除非你给每一个表头的 el-icon 图表外都写一个 el-popover 来包裹，那样 10 个表头需要写 10 个 el-popover）。所以控制台会报警告提示：

ElementPlusError: [ElOnlyChild] no valid child node found at debugWarn (chunk-32EVVALS.js?v=a0ab03ed:9136:37)

暂无好的解决办法，大家有方案可提供下。

——————————————————————————————————————————————————
更新： 我直接把 el-table 也给进行了封装，动态遍历渲染表格（也就动态渲染了表头，也就可以给表头 el-icon 图标外包裹一个 el-popover 来实现各个表头的筛选，且不会报告警报错）