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

最新推荐文章于 2024-07-25 11:01:39 发布

我家二爷

最新推荐文章于 2024-07-25 11:01:39 发布

阅读量405

点赞数 6

文章标签： css es6 前端

本文链接：https://blog.csdn.net/Guanerye0314/article/details/136162398

版权

本文介绍了如何在使用Element-UI的输入框时，当用户清空搜索内容时让页面自动刷新。方法包括在input中添加change事件直接调用刷新方法，以及使用watch事件监听searchfilename的变化来控制页面刷新。

摘要由CSDN通过智能技术生成

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

搜索功能非常常见，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-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();

      }

    },

  }