el-table 表头添加下拉筛选框 附带输入过滤

锤爆主管的狗头，想在饿了么ui 自带的筛选下 新增输入框过滤筛选选项

但是改动封装的 不太好做

我就手撸了个比较还原业务场景，选择器仍旧使用了ele 组件

1、 选择器跟按钮的样式

<!-- 搜索 -->
// showCJ 筛选框是否显示
<div class="cj" v-if='showCJ'>
  <el-row :gutter="20">
    <el-col :span="18">
      <el-select 
      v-model="cjSelect" 
      filterable 
      multiple
      placeholder="请选择">
        <el-option
          v-for="item in people"
          :key="item.value"
          :label="item.text"
          :value="item.value">
        </el-option>
      </el-select>
    </el-col>
    <el-col :span="2">
        <el-button style="margin-top:5px">确认</el-button>
    </el-col>
  </el-row>
</div>

2、表格表头设置

<el-table-column
  prop="tag"
  label="邀约人员"
  align="center"
  column-key="ownerIds"
  filter-placement="bottom-end"
  :render-header="chengjiaoFilter">
  <template slot-scope="scope">
    <span v-for="(item,index) in scope.row.owner">{{item.name}}{{index < scope.row.owner.length -1?',':''}}</span>
  </template>
</el-table-column>

3、函数设置 表头可单击

// 表头渲染时生效 生成 带有事件的节点
chengjiaoFilter(h, { column }){
  console.log('111');
  
    if (column.property == 'tag') {
    return h('div',{style: 'margin-top:9px',},
      [h('b', {
        style: 'font-size:15px;cursor:pointer',
        on: {//这个是你的点击方法
          click: () => {
            this.chengjiaoFilter1()
          }
        }
      },'邀约人员'),
      h('i',{
        style:'color:#7E662E;font-size:12px',
        class:'el-icon-arrow-down'
      })]
  )}
},
// 控制筛选框是否显示
chengjiaoFilter1(){
  console.log('成交筛选'); 
  this.showCJ = !this.showCJ
}