Element UI el-input 清除按钮清空搜索结果并恢复列表

<el-input v-show="showSearch" v-model="searchvalue" placeholder="输入抽样模板编码或名称" clearable size="small" @keyup.native.enter="handleQuery" @clear="handleQuery" class="search-input" style="width: 200px; margin-right: 10px" />

为了实现点击 clearable 时返回列表内容，可以在 clear 事件触发时调用 handleQuery 方法。

代码中，我们给 el-input 添加了 @clear 事件监听器，并在监听器中调用了 handleQuery 方法。这样，当用户点击清除按钮时，handleQuery 方法会被触发，从而重新加载列表数据。

以下是 handleQuery 方法的代码示例：

handleQuery() {
  console.log('Search value:', this.searchvalue);
  if (!this.searchvalue ) {
    return;
  }
  let param = {
    keyValue: this.searchvalue,
    accountsId:this.accountsId
  };
  listVoucherGroup(param)
    .then((res) => {
      console.log(res, 'response');
      this.voucherGroupList = this.handleTree(
        res.data,
        'voucherGroupId',
        'parentId'
      );
    })
    .catch((error) => {
      console.error(error);
    });
  // this.getList();
},

需要注意的是，handleQuery 方法中的逻辑可能需要根据您的实际情况进行调整。例如，您可能需要在 handleQuery 方法中清空 searchvalue 变量，以便下次搜索时不会受到上一次搜索结果的影响。