elementUI 将查询条件封装为一个组件

在Element UI中，你可以将查询条件封装为一个可复用的组件来提高代码的组织性和灵活性。这通常通过 Vue 的单文件组件（Single File Component, SFC）实现。以下是一个基本步骤：

1. 创建一个新的Vue组件，比如`SearchFilter.vue`，在这个组件里定义查询条件相关的输入字段和逻辑。例如：

<template>
  <div class="search-filter">
    <el-form :model="filters" label-width="80px">
      <el-form-item label="关键词">
        <el-input v-model="filters.keyword"></el-input>
      </el-form-item>
      <!-- 添加更多查询条件输入 -->
    </el-form>
    <el-button @click="applyFilters">应用过滤</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      filters: {
        keyword: '',
        // 其他查询参数...
      }
    };
  },
  methods: {
    applyFilters() {
      this.$emit('update:filters', this.filters);
    }
  }
};
</script>

2. 在父组件中，导入并使用这个搜索过滤组件，同时监听`update:filters`事件来处理传递回来的查询条件：

<template>
  <div>
    <!-- 其他页面内容 -->
    <search-filter @update:filters="handleFiltersChange"></search-filter>
    <el-table :data="filteredData" ...></el-table> <!-- 表格展示数据 -->
  </div>
</template>

<script>
import SearchFilter from '@/components/SearchFilter.vue';

export default {
  components: { SearchFilter },
  data() {
    return {
      filteredData: [],
    };
  },
  methods: {
    handleFiltersChange(filters) {
      this.filteredData = filterYourData(this.originalData, filters); // 根据查询条件过滤原始数据
    },
  },
};
</script>

这样，每次点击“应用过滤”按钮，`SearchFilter`组件就会触发`applyFilters`方法，将当前的查询条件发送给父组件，进而改变表格的数据。