element表格 表头添加搜索框搜索功能

1. 效果

2. 代码

<el-table :data="accountData" >
   <template v-for="item in accountHead">
     <el-table-column
       v-if="item.id === 'object'"
       :key="item.id"
       :prop="item.id"
       :label="item.name"
     >
        <template #header>
          <el-popover placement="bottom" trigger="click">
            <div slot="reference">
              <span>标的 </span> 
              <i class="icon"></i> //标的后面的图标
            </div>
            <SearchObject />  //搜索框组件
          </el-popover>
        </template>
    </el-table-column>

    <!-- 其他列 -->
    <el-table-column
      v-else
      :key="item.id"
      :prop="item.id"
      :label="item.name">
    </el-table-column>
  </template>
</el-table>

SearchObject组件

<template>
  <div class="search-object">
    <div class="searchBox">
      <el-input
        class="inputArea"
        placeholder="请输入"
        v-model="inputContent"
        clearable>
      </el-input>
      <div class="buttonArea">
        <button class="search" @click="hiddenPopover">搜索</button>
        <button class="all" @click="hiddenPopover">全部</button>
      </div>
    </div>
  </div>
</template>