基于el-form实现展开/收起的查询条件

可以通过el-form的collapse属性来实现展开/收起的查询条件。具体实现步骤如下：

1. 在el-form中添加一个带有v-model的collapse属性。

2. 将查询条件放在el-form内部的el-collapse-item中，并根据需要设置title和name属性。

3. 在查询按钮的点击事件中，通过修改collapse属性的值来控制查询条件的展开和收起。

示例代码如下：

<template>
  <el-form :model="form" :rules="rules" :inline="true" :collapse.sync="collapse">
    <el-collapse-item title="查询条件" name="query">
      <el-form-item label="姓名" prop="name">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="年龄" prop="age">
        <el-input v-model.number="form.age"></el-input>
      </el-form-item>
    </el-collapse-item>
    <el-form-item>
      <el-button type="primary" @click="search">查询</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        name: '',
        age: ''
      },
      rules: {
        name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
        age: [{ type: 'number', message: '年龄必须为数字', trigger: 'blur' }]
      },
      collapse: false
    }
  },
  methods: {
    search() {
      // 查询操作
    }
  }
}
</script>

在上述示例代码中，通过将collapse属性绑定到data中的collapse变量上，并在查询按钮的点击事件中修改collapse的值，就可以实现查询条件的展开和收起。