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">
