vue搜索框的功能实现

1.搜索框和按钮

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

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

v-model="queryInfo.query"

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.$http.get('users',{params:this.queryInfo})
  console.log(res)
  if (res.meta.status !== 200) return this.$message.error('获取用户列表失败')
  this.userlist = res.data.users
  this.total = res.data.total
 },

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

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

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

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

@clear事件

clear

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

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