vue el-table 表头搜索（筛选）功能 头部添加搜索icon 点击重置按钮，重置对应字段的筛选条件（三）

如果在数据筛选时对原始数据进行操作，那么想重置该筛选条件的话，就需要重新获取数据（刷新页面）
不合理，需要实现重置某筛选条件的功能。

组件内部的重置按钮click方法

<el-button size="mini" @click="resetData">重置el-button>

将组件input框中的数据清空， 组件改为隐藏， 修改icon颜色，触发父组件的resetChange方法

resetData () {
          console.log('reset')
          this.value = ''
          this.visible = false
          this.iconColor = false
          const self = this
          self.$emit('resetChange', { type: self.type, value: self.value, tableType: self.tableType })
      },

实现逻辑如下：

1. 请求接口获取数据，加载到table，并且保存一个数据备份
2. 搜索时，筛选出符合条件的数据，并且记录筛选条件
3. 重置时，先将重置的这个条件从rules中删除，再用备份的数据，用剩下的条件过滤
4. 修改table的data

// 选择框回调 
      selectChange (data) {
          console.log('回调', data)
          // 自定义筛选框返回数据进行过滤添加到tableData数组中
          const type = data['type']
          const value = data['value']
          this.rules[type] = value
          if (value !== '' && type !== '') {
            this.tableDataDeal = this.tableDataDeal.filter(item =>
              item[type]
                .toString()
                .toLowerCase()
                .includes(value.toString().toLowerCase())
            )
          }
        },
// 重置回调 
        resetChange (data) {
          console.log('重置回调', data)
          delete this.rules[data['type']]
          var tmpData = this.tableDataDealCopy
          for (const key in this.rules) {
              tmpData = tmpData.filter(item =>
              item[key]
                .toString()
                .toLowerCase()
                .includes(this.rules[key].toString().toLowerCase()
                )
            )
          }
          this.tableDataDeal = tmpData
        },

这样就实现了重置搜索功能

1. 实现分析 点击跳转（零）
2. 在el-table 头部添加 搜索icon，点击icon出现popover。（可选：阻止在表格字段可排序时，点击icon会触发排序）点击跳转（一）
3. 在点击popover外部区域时，关闭popover。点击跳转（二）
4. 点击重置按钮，重置对应字段的筛选条件。点击跳转（三）
5. 扩展：在一个页面有多个表格时的修改。点击跳转（四）