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

实现自动展开/收起的查询条件，可以通过以下步骤：

1. 在el-form中使用el-collapse组件作为包裹器，用于展开/收起查询条件。

2. 在el-collapse-item中放置需要展示的查询条件组件，如el-input、el-select等。

3. 在el-collapse中设置v-model，用于控制展开/收起状态。

4. 在el-form中添加一个按钮，用于触发展开/收起状态的改变。

下面是一个简单的示例代码：

<template>
  <el-form :model="form" label-width="120px">
    <el-collapse v-model="activeName">
      <el-collapse-item title="查询条件" name="query">
        <el-row>
          <el-col :span="8">
            <el-form-item label="姓名">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="性别">
              <el-select v-model="form.gender" placeholder="请选择">
                <el-option label="男" value="male"></el-option>
                <el-option label="女" value="female"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="年龄">
              <el-input v-model.number="form.age"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-collapse-item>
    </el-collapse>
    <el-form-item>
      <el-button type="primary" @click="toggleCollapse">{{ activeName === 'query' ? '收起' : '展开' }}</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        name: '',
        gender: '',
        age: ''
      },
      activeName: 'query'
    }
  },
  methods: {
    toggleCollapse() {
      this.activeName = this.activeName === 'query' ? '' : 'query';
    }
  }
}
</script>

在上面的代码中，我们使用el-collapse组件包裹查询条件，设置v-model为activeName，用于控制展开/收起状态。通过el-collapse-item放置需要展示的查询条件组件，在el-form中添加一个按钮，通过点击按钮触发toggleCollapse方法改变展开/收起状态。