首页 > 其他 > 详细

element-ui 搜索框清空时页面刷新

时间:2020-06-16 16:46:09      阅读:351      评论:0      收藏:0      [点我收藏+]

搜索功能非常常见,element-ui自带的输入框以及清空功能,但是清空只能使输入框清空,而不会使页面跟着一起刷新,下面两种方法可以使输入框清空时页面也回到搜索之前的样子。

搜索框html:

<el-input style="width:200px;" placeholder="请输入文件名称" v-model="searchfilename" clearable>
            <el-button icon="el-icon-search" slot="append" @click="searchFile"></el-button>
 </el-input>
页面加载(刷新)方法:
readData(){
};
 
清空方法:
1.直接在input里加上change事件,事件绑定页面刷新方法即可。
<el-input style="width:200px;" placeholder="请输入文件名称" v-model="searchfilename" clearable @change="readData">
            <el-button icon="el-icon-search" slot="append" @click="searchFile"></el-button>
 </el-input>
2.watch事件:(该事件与mounted事件并列)
watch: {
    // 如果 `searchfilename` 发生改变,这个函数就会运行
    searchfilename: function() {
      if (this.searchfilename.length == 0) {
        this.readData();
      }
    },
  }

element-ui 搜索框清空时页面刷新

原文:https://www.cnblogs.com/shanxinxin/p/13141434.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!