vue elementui多条件查询

Vue和ElementUI可以结合使用来实现多条件查询。具体实现方法如下：

1. 在Vue组件中定义多个查询条件的数据模型，例如：

data() {
  return {
    query: {
      name: '',
      age: '',
      gender: ''
    },
    results: []
  }
}

2. 在模板中使用ElementUI的表单组件来输入查询条件，例如：

<el-form :model="query" inline>
  <el-form-item label="姓名">
    <el-input v-model="query.name"></el-input>
  </el-form-item>
  <el-form-item label="年龄">
    <el-input v-model.number="query.age"></el-input>
  </el-form-item>
  <el-form-item label="性别">
    <el-select v-model="query.gender">
      <el-option label="男" value="male"></el-option>
      <el-option label="女" value="female"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="search">查询</el-button>
  </el-form-item>
</el-form>

3. 在Vue组件中定义查询方法，根据查询条件发送请求并更新结果，例如：

methods: {
  search() {
    axios.get('/api/users', { params: this.query }).then(response => {
      this.results = response.data
    })
  }
}

4. 在模板中展示查询结果，例如：

<el-table :data="results">
  <el-table-column prop="name" label="姓名"></el-table-column>
  <el-table-column prop="age" label="年龄"></el-table-column>
  <el-table-column prop="gender" label="性别"></el-table-column>
</el-table>

以上就是使用Vue和ElementUI实现多条件查询的基本步骤。