elementui中多条件查询

在 Element UI 中进行多条件查询通常可以使用表单组件和表格组件的结合。以下是一个示例，演示如何使用 Element UI 实现多条件查询：

1. 在页面中添加表单组件，用于输入查询条件。例如，可以使用 `el-form` 组件和各种表单控件（如 `el-input`、`el-date-picker` 等）来构建查询表单。

<template>
  <el-form :inline="true" @submit="search">
    <el-form-item label="关键字">
      <el-input v-model="keyword"></el-input>
    </el-form-item>
    <el-form-item label="日期">
      <el-date-picker v-model="date" type="date"></el-date-picker>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" native-type="submit">查询</el-button>
      <el-button @click="reset">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      keyword: '',
      date: ''
    };
  },
  methods: {
    search() {
      // 处理查询逻辑
      // 可以通过发送请求或在前端进行过滤等操作
      console.log('关键字:', this.keyword);
      console.log('日期:', this.date);
    },
    reset() {
      this.keyword = '';
      this.date = '';
    }
  }
};
</script>

2. 在表格组件中显示查询结果。可以使用 `el-table` 组件来展示查询结果，并根据查询条件进行过滤。

<template>
  <div>
    <el-table :data="filteredData">
      <!-- 表格列定义 -->
      <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>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: [
        { name: '张三', age: 20, gender: '男' },
        { name: '李四', age: 25, gender: '女' },
        { name: '王五', age: 30, gender: '男' }
      ],
      keyword: '',
      date: ''
    };
  },
  computed: {
    filteredData() {
      // 根据查询条件过滤数据
      return this.data.filter(item => {
        // 示例：根据关键字和日期进行过滤
        return item.name.includes(this.keyword) && item.date === this.date;
      });
    }
  }
};
</script>

这只是一个简单示例，你可以根据具体需求进行自定义开发。通过表单组件获取用户输入的查询条件，在表格组件中使用计算属性 filteredData 对数据进行过滤，然后展示查询结果。

希望这个示例能对你有所帮助！如果还有其他问题，请随时提问。