fix(table): fix the filter panel of the table (#509)

packages/table/src/dropdown.ts

@@ -1,35 +0,0 @@
-import isServer from '@element-plus/utils/isServer'
-const dropdowns = []
-
-!isServer && document.addEventListener('click', function (event: Event) {
-  dropdowns.forEach(function (dropdown) {
-    const target = event.target
-    if (!dropdown || !dropdown.$el) return
-    if (target === dropdown.$el || dropdown.$el.contains(target)) {
-      return
-    }
-    dropdown.handleOutsideClick && dropdown.handleOutsideClick(event)
-  })
-})
-
-function useDropdown(instance) {
-  const open = () => {
-    if (instance) {
-      dropdowns.push(instance)
-    }
-  }
-
-  const close = () => {
-    const index = dropdowns.indexOf(instance)
-    if (index !== -1) {
-      dropdowns.splice(instance, 1)
-    }
-  }
-
-  return {
-    open,
-    close,
-  }
-}
-
-export default useDropdown

packages/table/src/filter-panel.vue

@@ -1,16 +1,15 @@
 <template>
   <el-popper
     ref="tooltip"
+    v-model:visible="tooltipVisible"
     :offset="0"
     :placement="placement"
     :show-arrow="false"
-    :trigger="['click']"
-    :visible="tooltipVisible"
+    trigger="click"
     effect="light"
     popper-class="el-table-filter el-table-filter-padding"
   >
     <template #default>
-      <div v-click-outside="handleOutsideClick">
       <div v-if="multiple">
         <div class="el-table-filter__content">
           <el-scrollbar
@@ -67,12 +66,11 @@
           {{ filter.text }}
         </li>
       </ul>
-      </div>
     </template>
     <template #trigger>
       <span
         class="el-table__column-filter-trigger el-none-outline"
-        @click="tooltipVisible = true"
+        @click="showFilterPanel"
       >
         <i
           :class="[
@@ -88,8 +86,6 @@
 <script lang='ts'>
 import { Popper as ElPopper } from '@element-plus/popper'
 import { t } from '@element-plus/locale'
-import { ClickOutside } from '@element-plus/directives'
-import useDropdown from './dropdown'
 import { Checkbox as ElCheckbox, CheckboxGroup as ElCheckboxGroup } from '@element-plus/checkbox'
 import { Scrollbar as ElScrollbar } from '@element-plus/scrollbar'
 import {
@@ -104,18 +100,12 @@ import { Store, TableColumnCtx, TableHeader } from './table'
 
 export default {
   name: 'ElTableFilterPanel',
-
-  directives: {
-    ClickOutside,
-  },
-
   components: {
     ElCheckbox,
     ElCheckboxGroup,
     ElScrollbar,
     ElPopper,
   },
-
   props: {
     placement: {
       type: String,
@@ -138,7 +128,6 @@ export default {
       parent.filterPanels.value[props.column.id] = instance
     }
     const tooltipVisible = ref(false)
-    const { open, close } = useDropdown(instance)
 
     const filters = computed(() => {
       return props.column && props.column.filters
@@ -179,21 +168,23 @@ export default {
       return filter.value === filterValue.value
     }
 
-    const handleOutsideClick = () => {
-      setTimeout(() => {
+    const hidden = () => {
       tooltipVisible.value = false
-      }, 16)
+    }
+    const showFilterPanel = (e: MouseEvent) => {
+      e.stopPropagation()
+      tooltipVisible.value = true
     }
 
     const handleConfirm = () => {
       confirmFilter(filteredValue.value)
-      handleOutsideClick()
+      hidden()
     }
 
     const handleReset = () => {
       filteredValue.value = []
       confirmFilter(filteredValue.value)
-      handleOutsideClick()
+      hidden()
     }
 
     const handleSelect = (_filterValue?: string | string[]) => {
@@ -203,7 +194,7 @@ export default {
       } else {
         confirmFilter([])
       }
-      handleOutsideClick()
+      hidden()
     }
 
     const confirmFilter = (filteredValue: unknown[]) => {
@@ -220,11 +211,6 @@ export default {
         if (props.column) {
           props.upDataColumn('filterOpened', value)
         }
-        if (value) {
-          open()
-        } else {
-          close()
-        }
       },
       {
         immediate: true,
@@ -232,7 +218,6 @@ export default {
     )
     return {
       tooltipVisible,
-      handleOutsideClick,
       multiple,
       filteredValue,
       filterValue,
@@ -242,6 +227,7 @@ export default {
       handleSelect,
       isActive,
       t,
+      showFilterPanel,
     }
   },
 }

packages/table/src/table-header/event-helper.ts

@@ -18,7 +18,6 @@ function useEvent(props: TableHeaderProps, emit) {
     } else if (column.filterable && !column.sortable) {
       handleFilterClick(event)
     }
-
     parent.emit('header-click', column, event)
   }
 

website/docs/en-US/table.md

@@ -996,6 +996,7 @@ Filter the table to find desired data.
   <el-button @click="resetDateFilter">reset date filter</el-button>
   <el-button @click="clearFilter">reset all filters</el-button>
   <el-table
+    row-key="date"
     ref="filterTable"
     :data="tableData"
     style="width: 100%">

website/docs/es/table.md

@@ -996,6 +996,7 @@ Filtra la tabla para encontrar la información que necesita.
   <el-button @click="resetDateFilter">清除日期过滤器</el-button>
   <el-button @click="clearFilter">清除所有过滤器</el-button>
   <el-table
+    row-key="date"
     ref="filterTable"
     :data="tableData"
     style="width: 100%">

website/docs/fr-FR/table.md

@@ -996,6 +996,7 @@ Vous pouvez filtrer la table pour obtenir rapidement les lignes désirées.
   <el-button @click="resetDateFilter">Effacer le filtre date</el-button>
   <el-button @click="clearFilter">Effacer tout les filtres</el-button>
   <el-table
+    row-key="date"
     ref="filterTable"
     :data="tableData"
     style="width: 100%">

website/docs/zh-CN/table.md

@@ -996,6 +996,7 @@
   <el-button @click="resetDateFilter">清除日期过滤器</el-button>
   <el-button @click="clearFilter">清除所有过滤器</el-button>
   <el-table
+    row-key="date"
     ref="filterTable"
     :data="tableData"
     style="width: 100%">