fix(table): fix the filter panel of the table (element-plus#509)

packages/table/src/filter-panel.vue

@@ -1,78 +1,76 @@
 <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
-              :native="false"
-              :noresize="true"
-              wrap-class="el-table-filter__wrap"
+      <div v-if="multiple">
+        <div class="el-table-filter__content">
+          <el-scrollbar
+            :native="false"
+            :noresize="true"
+            wrap-class="el-table-filter__wrap"
+          >
+            <el-checkbox-group
+              v-model="filteredValue"
+              class="el-table-filter__checkbox-group"
             >
-              <el-checkbox-group
-                v-model="filteredValue"
-                class="el-table-filter__checkbox-group"
+              <el-checkbox
+                v-for="filter in filters"
+                :key="filter.value"
+                :label="filter.value"
               >
-                <el-checkbox
-                  v-for="filter in filters"
-                  :key="filter.value"
-                  :label="filter.value"
-                >
-                  {{ filter.text }}
-                </el-checkbox>
-              </el-checkbox-group>
-            </el-scrollbar>
-          </div>
-          <div class="el-table-filter__bottom">
-            <button
-              :class="{ 'is-disabled': filteredValue.length === 0 }"
-              :disabled="filteredValue.length === 0"
-              type
-              @click="handleConfirm"
-            >
-              {{ t('el.table.confirmFilter') }}
-            </button>
-            <button type @click="handleReset">
-              {{ t('el.table.resetFilter') }}
-            </button>
-          </div>
+                {{ filter.text }}
+              </el-checkbox>
+            </el-checkbox-group>
+          </el-scrollbar>
         </div>
-        <ul v-else class="el-table-filter__list">
-          <li
-            :class="{
-              'is-active': filterValue === undefined || filterValue === null,
-            }"
-            class="el-table-filter__list-item"
-            @click="handleSelect(null)"
-          >
-            {{ t('el.table.clearFilter') }}
-          </li>
-          <li
-            v-for="filter in filters"
-            :key="filter.value"
-            :class="{ 'is-active': isActive(filter) }"
-            :label="filter.value"
-            class="el-table-filter__list-item"
-            @click="handleSelect(filter.value)"
+        <div class="el-table-filter__bottom">
+          <button
+            :class="{ 'is-disabled': filteredValue.length === 0 }"
+            :disabled="filteredValue.length === 0"
+            type
+            @click="handleConfirm"
           >
-            {{ filter.text }}
-          </li>
-        </ul>
+            {{ t('el.table.confirmFilter') }}
+          </button>
+          <button type @click="handleReset">
+            {{ t('el.table.resetFilter') }}
+          </button>
+        </div>
       </div>
+      <ul v-else class="el-table-filter__list">
+        <li
+          :class="{
+            'is-active': filterValue === undefined || filterValue === null,
+          }"
+          class="el-table-filter__list-item"
+          @click="handleSelect(null)"
+        >
+          {{ t('el.table.clearFilter') }}
+        </li>
+        <li
+          v-for="filter in filters"
+          :key="filter.value"
+          :class="{ 'is-active': isActive(filter) }"
+          :label="filter.value"
+          class="el-table-filter__list-item"
+          @click="handleSelect(filter.value)"
+        >
+          {{ filter.text }}
+        </li>
+      </ul>
     </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(() => {
-        tooltipVisible.value = false
-      }, 16)
+    const hidden = () => {
+      tooltipVisible.value = false
+    }
+    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,19 +211,13 @@ export default {
         if (props.column) {
           props.upDataColumn('filterOpened', value)
         }
-        if (value) {
-          open()
-        } else {
-          close()
-        }
       },
       {
         immediate: true,
       },
     )
     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%">