zoukankan      html  css  js  c++  java
  • element-ui 搜索框清空时页面刷新

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

    搜索框html:

    <el-input style="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="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();
          }
        },
      }
    不断学习.jpg
  • 相关阅读:
    Flask程序相关配置加载的三种方式
    Redis数据库在windows系统下的安装及使用
    Redis数据库介绍
    python中模块的制作
    4.ORM框架的查询
    3.ORM框架一对多的关系及使用
    2.ORM框架添加,修改,删除操作
    1.ORM介绍,基本配置及通过ORM框架创建表
    4.集合
    3.字典
  • 原文地址:https://www.cnblogs.com/shanxinxin/p/13141434.html
Copyright © 2011-2022 走看看