VUE+leanCloud:搜索功能实现-CSDN博客

本文链接：https://blog.csdn.net/SOOOOOF/article/details/140500947

// 搜索逻辑
// searchTypeName绑定搜索的数据
const searchTypeName=ref('')
//搜索方法
  //调用搜索API
const searchtype =async() => {
 let data=await findLiveAll(currentPage.value,pageSize.value,searchTypeName.value)
 lives.value=data.results
 total.value=data.count //将搜索后的总数量重新渲染
}

页面

  <!-- 搜索 -->
  <el-row>
    <el-col :span="6">
      <input v-model="searchTypeName" placeholder="请输入要类型名称进行搜索" >
      </input>
      </el-col>
    <el-col :span="10">
      <el-button type="primary" size="default" @click="searchtype()">搜索</el-button>
    </el-col>
  </el-row>

API封装

//查询获取生活馆的数据
// count=1开启计数功能
// limit 每页条数限制，skip划到多少条后开始显示，
export const  findLiveAll= async(page=1,current=10,styleName)=>{
    let pages=(page-1)*10
    let iswhere= styleName?`&where={"style_name":"${styleName}"}`:''//判断是否有条件
    let res=await requests.get(`classes/live?limit=${current}&count=1&skip=${pages}${iswhere}`)
    console.log("获取数据库中数据",res)
    return res.data
}