vue element ui table 过滤功能实现

Element UI代码

<template>
<div>
  <el-table
    :data="tableData"
    style="width: 100%">
    border`在这里插入代码片`
    >
    <el-table-column v-for="(kpidata,index) in kpiDataListMap" :render-header="renderHeaderOne"
                     :key="index"
                     :prop="kpidata.propName"
                     :label="kpidata.labelName"
                     show-overflow-tooltip
                     sortable="true"

    >
    </el-table-column>
  </el-table>

</div>
</template>

script代码

<script>
  export default {
    data () {
      return {
        /**弹出框的过滤值**/
        popoverData:'',
        /**table的列名称汉语及英语*/
        kpiDataListMap: [{
          propName: 'date',
          labelName: '日期',

        }, {
          propName: 'name',
          labelName: '姓名',

        }, {
          propName: 'address',
          labelName: '地址',

        }],
        /**绑定的数据Json*/
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
          tag: '家'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄',
          tag: '公司'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄',
          tag: '公司'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄',
          tag: '公司'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄',
          tag: '家'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄',
          tag: '公司'
        }]
      }
    },
    /**data和method直接使用逗号隔开**/
    methods: {
      formatter (row, column) {
        return row.address
      },
      filterTag (value, row) {
        return row.tag === value
      },
      filterHandler (value, row, column) {
        debugger
        const property = column['property']
        return row[property] === value
      },

      renderHeaderOne (h, {column, $index}) {

        return h('span', {}, [
          h('span', {}, column.label),
          h('el-popover', { props: { placement: 'top-start', width: '200', trigger: 'hover' }}, [
            h('i', { slot: 'reference', class:'el-icon-question'}, ''),
            h('div',{},[
              h('input', { width: '200'}, ''),
            ]),
            h('div',{style:"text-align: right; margin: 0"},[
              h('button', {type:'primary',size:'mini',
                on: {
                  click: () => {
                 //点击确认按钮的事件
                  alert('确定');
                  console.log(`${column.label}   ${$index}`)
                               }
                    }

              }, '确定'),
              h('span', {}, '          '),
              h('button', {size:'mini',
                on: {
                  click: () => {
                  //点击取消按钮的事件
                  alert('取消');
                  console.log(`${column.label}   ${$index}`)
              }
      }

              }, '取消')
            ]),

          ])
        ])

      }
    }

  }
</script>

执行的效果图