后端加了一个status条件查询，用0、1、2进行标识，前端如何使用组件实现筛选功能？

本文链接：https://blog.csdn.net/qq_43474780/article/details/129680705

本文介绍了如何在前端通过Select组件实现状态筛选功能，下拉框包含“全部”、“已完成”和“未完成”选项，对应值为-1、0和1。用户选择后，使用Vue.js的v-model绑定状态值，并通过axios发送GET请求到后端API，依据传入的status参数进行数据筛选。

摘要由CSDN通过智能技术生成

前端可以使用下拉框（Select）组件实现筛选功能，下拉框中显示的选项可以是“全部”、“已完成”、“未完成”等，对应的值分别为-1、0、1或0、1、2。

具体实现步骤如下：

在前端代码中添加一个下拉框组件，用于选择状态筛选条件。
在下拉框组件中添加三个选项：“全部”、“已完成”、“未完成”，对应的值为-1、0、1或0、1、2。
在查询参数中添加一个status参数，将下拉框选中的值作为参数值传递给后端。
后端根据status的值进行筛选，返回符合条件的数据给前端。
示例代码：

<template>
  <div>
    <label for="status">状态：</label>
    <select id="status" v-model="status">
      <option value="-1">全部</option>
      <option value="0">已完成</option>
      <option value="1">未完成</option>
    </select>
    <button @click="search">查询</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      status: -1, // 默认选中全部
    }
  },
  methods: {
    search() {
      // 根据选择的状态发送请求
      this.$axios.get('/api/data', {
        params: {
          status: this.status
        }
      }).then(res => {
        // 处理响应数据
      }).catch(err => {
        // 处理错误
      })
    }
  }
}
</script>