vue中实现搜索按钮功能

Diiiy

已于 2023-01-11 11:12:16 修改

阅读量2.7k

点赞数

分类专栏：前端文章标签： vue.js javascript elementui

于 2023-01-09 20:05:05 首次发布

本文链接：https://blog.csdn.net/qwerrerfjj/article/details/128620178

版权

前端专栏收录该内容

36 篇文章

订阅专栏

第一步：给表单添加v-bind:model属性，实现数据的传递

<el-form :inline="true" :model="queryList" class="demo-form-inline">
   <el-form-item label="标签名称">
      <el-input v-model="queryList.tagName"></el-input>
   </el-form-item>
   <el-form-item label="状态" class="state">
      <el-select v-model="queryList.state" placeholder="请选择">
         <el-option
            v-for="item in status"
            :key="item.id"
            :label="item.value"
            :value="item.id"
          >
         </el-option>
       </el-select>
   </el-form-item>
   <el-form-item>
       <el-button @click="hClean">清除</el-button>
       <el-button type="primary" @click="loadtagList">搜索</el-button>
   </el-form-item>
</el-form>

第二步：再绑定的数据中添加请求数据所需要的参数

// 请求数据的参数
queryList: {
   page: 1,
   pagesize: 10,
   tagName: '',
   state: null
 }

第三步：给搜索按钮绑定一个点击事件用来获取需要的列表

<el-form-item>
   <el-button @click="hClean">清除</el-button>
   <el-button type="primary" @click="loadtagList">搜索</el-button>
</el-form-item>

第四步：通过绑定的数据作为参数获取列表

created () {
  this.loadtagList()
}，
// 封装获取标签列表
async loadtagList () {
  // 调获取标签接口
  const { data: res } = await list(this.queryList)
    console.log('标签列表......', res)
    // 页面渲染
    this.tagList = res.items
    this.total = res.counts
}