1.搜索框和按鈕
<el-input placeholder="請輸入內(nèi)容" v-model="queryInfo.query" clearable @clear="getGoodsList">
? <el-button slot="append" icon="el-icon-search" @click="getGoodsList" ></el-button>
</el-input>
2.數(shù)據(jù)的雙向綁定，通過查詢參數(shù)進行搜索
v-model="queryInfo.query"
data(){
? return{
? ? // 獲取列表的參數(shù)對象
? ? queryInfo:{
? ? ? //查詢參數(shù)
? ? ? query: '',
? ? ? // 當前頁碼
? ? ? pagenum: 1,
? ? ? // 每頁顯示條數(shù)
? ? ? pagesize: 2
? ? },
}
3.為查詢按鈕設(shè)置點擊事件
<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="請輸入內(nèi)容" v-model="queryInfo.query" clearable @clear="getGoodsList">
（2）將清空功能與展示列表關(guān)聯(lián)
@clear事件
clear 在點擊由 clearable 屬性生成的清空按鈕時觸發(fā)
<el-input placeholder="請輸入內(nèi)容" v-model="queryInfo.query" clearable @clear="getGoodsList">
