vue搜索框的功能实现

1.搜索框和按钮

<el-input placeholder="请输入内容" v-model="" clearable @clear="getUserList">
  <el-button slot="append" icon="el-icon-search" @click="getUserList" ></el-button>
</el-input>

2.数据的双向绑定，通过查询参数进行搜索

v-model=""

data(){
  return{
    // 获取列表的参数对象
    queryInfo:{
      //查询参数
      query: '',
      // 当前页码
      pagenum: 1,
      // 每页显示条数
      pagesize: 2
    },

}

3.为查询按钮设置点击事件

<el-button slot="append" icon="el-icon-search" @click="getUserList" ></el-button>

 // 获取用户列表
async getUserList(){
  const {data:res} =await this.$('users',{params:})
  (res)
  if ( !== 200) return this.$('获取用户列表失败')
   = 
   = 
 },

4.为搜索框添加一键清空功能

（1）使用clearable属性即可得到一个可清空的输入框

<el-input placeholder="请输入内容" v-model="" clearable @clear="getUserList">

（2）将清空功能与展示列表关联

@clear事件

clear

在点击由 clearable 属性生成的清空按钮时触发

<el-input placeholder="请输入内容" v-model="" clearable @clear="getUserList">