1.搜索框和按钮

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

  <el-button slot="append" icon="el-icon-search" @click="getGoodsList" ></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="getGoodsList" ></el-button>

// 获取用户列表

async getGoodsList(){

  const {data:res} =await this.$http.get('goods',{params:this.queryInfo})

  console.log(data)

  if (meta.status !== 200) return this.$message.error('获取用户列表失败')

  this.userlist = data.users

  this.total = data.total

},

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

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

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

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

@clear事件

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

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