封装一个每列带有search的表格

利用element ui 的自定义的头部实现，效果：

代码：

<template>
  <div class='searchtable'>
    <el-table
      :data="tableData"
      border
      @sort-change='sortColumns'
      @selection-change="handleSelectionChange"
      @row-click='clickRow'
      ref='commontable'
      :cell-class-name='changeCellStyle'
      style="width: 100%">

  <!-- 为了防止循环第一项显示在最后一项 -->
      <el-table-column>
        <el-table-column
          width="1"
        >
        </el-table-column>
      </el-table-column>
      <!-- 中间循环列 -->
      <!-- 当设置宽度的时候，循环此div，生成有固定宽度的表格 -->
      <div
       v-for='item in ColumnsData'
       :key='item.id'
       v-if='columnwidth'
      >
        <el-table-column
         :label='item.label'
         align='center'
         fixed='left'
         :width="columnwidth"
         v-if='item.id==0||item.id==1'
         sortable='custom'
         show-overflow-tooltip
         >
          <el-table-column
            :prop="item.prop"
            :width="columnwidth"
            :label='item.label'
            :render-header='addSearch'
            show-overflow-tooltip
            >
          </el-table-column>
        </el-table-column>
        <el-table-column
         :label='item.label'
         align='center'
         :width="columnwidth"
         v-else
         sortable='custom'
         show-overflow-tooltip
         >
          <el-table-column
            :prop="item.prop"
            :width="columnwidth"
            :label='item.label'
            :render-header='addSearch'
            show-overflow-tooltip
            >
          </el-table-column>
        </el-table-column>
      </div>
</template>

固定前两列
:render-header='addSearch' 自定义头部
在methods中显示：

    addSearch (h, {column}) {
      let inputValue = {}
      return h('Input', {
        props: {
          placeholder: 'Search' + ' ' + column.label,
          icon: 'ios-search-strong'
        },
        style: {
          paddingRight: '5px'
        },
        on: {
          input: val => {
            inputValue = val
            if (!inputValue) {
              this.vaildInputValue(column.label, inputValue)
            }
          },
          class: 'ivu-input-icon',
          'on-click': () => {
            this.vaildInputValue(column.label, inputValue)
          },
          'on-enter': () => {
            console.log('enter')
            this.vaildInputValue(column.label, inputValue)
          }
        }
      })
    },

render JS 渲染
相当于动态生成DOM元素，还可以给DOM元素添加事件，在jQuery中是createElement 来动态生成DOM元素。
vaildInputValue 函数是判断用户的输入

    vaildInputValue (label, inputValue) {
      if (!inputValue) {
        this.$set(this.search, label, '')
        this.sendSearchVal()
        return
      }
      this.$set(this.search, label, inputValue)
      this.sendSearchVal()
    },

给每一列的数据添加搜索的对象数据，默认的是空，如果发生改变就会改变search数据。