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

组件内部的重置按钮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. 扩展:在一个页面有多个表格时的修改。点击跳转(四)
Logo

前往低代码交流专区

更多推荐