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
}