重置和搜索按钮的共同事件写法

前言  

以前在书写重置按钮时候都是额外书写一个点击事件,清空输入框中的数据再进行搜索

为了简洁才想起来 为什么两个事件不写在一起呢

 <el-button @click="handleSearch('reset')">重置</el-button>
            <el-button
              type="primary"
              icon="el-icon-search"
              @click="handleSearch()"
              >查询</el-button>

将查询数据接口单独写出一个方法  当传入数据为reset时候 请求携带参数全部为undefined,再重新调用搜索数据接口

 /**
     * @func 搜索/重置
     * @param {String} type
     */
    handleSearch(type) {
      if (type === 'reset') {
        this.reqData = {
          agent_id: undefined,
          agent_name_like: undefined,
          batch_no: undefined,
          start_date: undefined,
          end_date: undefined,
          status: undefined,
          page: 1,
          limit: 10
        }
        this.time = ''
      }
      this.reqData.page = 1
      this.getTableList()
    },
    /**
     * @func 获取列表数据
     * @param {Object} reqData
     */
    getTableList() {
      queryBatchList(this.reqData).then(res => {
        this.total = res.total
        this.tableData = res.list
      })
    }

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 对于您提出的问题,我会尽力回答。在vxe-grid中,重置按钮应该能够清空搜索条件。如果重置按钮无法清空搜索条件,可能是因为代码实现不当,需要对代码进行修改,确保重置按钮能够正确清空搜索条件。您可以检查代码并尝试进行调试,以解决此问题。 ### 回答2: vxe-grid是一款功能强大的表格组件,它提供了许多方便的功能和选项来满足开发者的需求。其中一个功能是重置按钮,这个按钮通常用于清空搜索条件,使得表格恢复到初始状态。 然而,在某些情况下,vxe-grid的重置按钮可能没有清空搜索条件,这可能是由于开发者在使用这个组件时没有正确配置或使用相关的属性和方法。 解决这个问题的方法之一是通过设置vxe-grid的`clears`属性来保证重置按钮的功能正常工作。这个属性可以指定需要清空的搜索条件和其他相关状态。例如,我们可以将搜索条件、排序状态、分页状态等都包含在这个属性中,以确保在点击重置按钮时,所有这些状态都会被正确清空。 另一个可能导致重置按钮不清空搜索条件的原因是在代码中缺少相应的逻辑。在点击重置按钮时,我们应该正确地调用vxe-grid的相关方法来重置搜索条件。例如,我们可以在重置按钮的点击事件中调用`clearAll()`方法来清空所有的搜索条件。 总之,解决vxe-grid中重置按钮不清空搜索条件的问题需要开发者正确地配置组件的属性和使用相应的方法。通过设置`clears`属性和调用`clearAll()`方法,我们可以确保重置按钮能够正确清空搜索条件,使得表格恢复到初始状态。 ### 回答3: 在vxe-grid中重置按钮不清空搜索条件,可能是因为在组件的设计中,重置按钮的功能被定义为重置表格的状态,而不是清空搜索条件。 通常情况下,搜索条件会保存在组件的状态中,以便在用户重新渲染或刷新页面时保持搜索结果的一致性。因此,当用户点击重置按钮时,组件会将表格的状态恢复为默认值,但搜索条件不会被清空。 这样设计的目的是为了提供更好的用户体验。假设用户在表格中使用了多个筛选条件进行搜索,并且在某一次操作后希望返回之前的搜索结果,如果重置按钮清空了搜索条件,用户就需要重新输入或选择一遍搜索条件,这会给用户带来不便。 同时,vxe-grid通常还提供了清空搜索条件的功能,用户可以通过不同的方式清空搜索条件,例如点击清空按钮、手动删除搜索框中的文本、或是通过调用相关的方法清空搜索条件。 总而言之,vxe-grid中的重置按钮不清空搜索条件的设计是为了保持搜索结果的一致性和提供更好的用户体验。如果用户需要清空搜索条件,可以通过其他途径来完成。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值