vue-el-table 表头搜索（筛选）增强：popover 交互体验优化

前端

2023-12-06 08:10:50

前言

在使用 vue el-table 表格组件时，为了方便用户快速筛选数据，我们通常会在表头添加搜索框。而当搜索框触发 popover 弹出时，如果想关闭 popover，需要再次点击搜索框图标，这显然不够人性化。

本文将介绍如何使用自定义指令，实现点击 popover 外部区域即可关闭 popover，从而提升交互体验。

实现思路

为了实现点击 popover 外部区域关闭 popover 的功能，我们需要使用自定义指令。自定义指令提供了在 DOM 中操作元素的强大功能，我们可以通过它来监听 popover 的点击事件，并判断点击位置是否在 popover 之外。

自定义指令

首先，我们定义一个名为 close-popover 的自定义指令，如下所示：

Vue.directive('close-popover', {
  bind(el, binding) {
    const popover = document.querySelector(binding.value)
    el.addEventListener('click', (e) => {
      if (!popover.contains(e.target) && !el.contains(e.target)) {
        popover.style.display = 'none'
      }
    })
  }
})

在指令中，我们首先获取 popover 元素，然后在元素上监听点击事件。当点击事件触发时，我们判断点击目标是否在 popover 或触发元素内部。如果不是，则隐藏 popover。

使用自定义指令

在使用 el-table 表格组件时，我们可以将自定义指令应用到搜索框图标上，如下所示：

<el-table>
  <el-table-column prop="name">
    <template slot="header">
      <el-input v-model="name" placeholder="请输入名称">
        <el-button slot="append" icon="el-icon-search" @click="onSearch" v-close-popover="popoverId"></el-button>
      </el-input>
      <div id="popoverId" style="display: none">
        <!-- popover 内容 -->
      </div>
    </template>
  </el-table-column>
</el-table>