vue多条件查询

Vue多条件查询可以使用计算属性computed来动态拼接查询条件，具体实现步骤如下：

1. 在数据模型中定义需要查询的条件：

data() {
  return {
    keyword: '',
    status: '',
    type: '',
    ...
  }
}

2. 在模板中使用Input或Select等组件来输入或选择查询条件：

<el-input v-model="keyword" placeholder="请输入关键字"></el-input>
<el-select v-model="status" placeholder="请选择状态">
  <el-option label="启用" value="1"></el-option>
  <el-option label="禁用" value="0"></el-option>
</el-select>
<el-select v-model="type" placeholder="请选择类型">
  <el-option label="类型1" value="1"></el-option>
  <el-option label="类型2" value="2"></el-option>
</el-select>

3. 使用计算属性computed来对查询条件进行拼接：

computed: {
  queryConditions() {
    let conditions = {}
    if (this.keyword) {
      conditions.keyword = this.keyword
    }
    if (this.status) {
      conditions.status = this.status
    }
    if (this.type) {
      conditions.type = this.type
    }
    // 添加其他条件
    ...
    return conditions
  }
}

4. 在查询按钮的点击事件中，将查询条件传递给后端接口，获取查询结果：

methods: {
  search() {
    // 将查询条件传递给后端接口
    axios.get('/api/search', {
      params: this.queryConditions
    }).then(res => {
      // 处理查询结果
      ...
    })
  }
}

这样，通过控制Input或Select等组件的v-model，就可以动态改变查询条件，达到多条件查询的效果。