vue+elementUI 搜索栏公共组件封装，封装多搜索条件通用组件 代码

好的，下面是一个示例代码，仅供参考：

SearchBar.vue：

<template>
  <div>
    <el-input v-model="keyword" placeholder="请输入搜索关键字"></el-input>
    <el-select v-model="condition" placeholder="请选择搜索条件">
      <el-option v-for="option in options" :key="option.value" :label="option.label" :value="option.value"></el-option>
    </el-select>
    <el-button type="primary" @click="handleSearch">搜索</el-button>
    <el-button type="text" @click="addCondition">添加条件</el-button>
    <div v-for="(condition, index) in conditions" :key="index">
      <el-select v-model="condition.value" placeholder="请选择搜索条件">
        <el-option v-for="option in options" :key="option.value" :label="option.label" :value="option.value"></el-option>
      </el-select>
      <el-input v-model="condition.keyword" placeholder="请输入搜索关键字"></el-input>
      <el-button type="text" @click="removeCondition(index)">删除</el-button>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    options: Array, // 搜索条件选项
  },
  data() {
    return {
      keyword: '', // 搜索关键字
      condition: '', // 当前搜索条件
      conditions: [], // 其他搜索条件
    };
  },
  methods: {
    handleSearch() {
      const params = {
        keyword: this.keyword,
        condition: this.condition,
        conditions: this.conditions,
      };
      this.$emit('search', params);
    },
    addCondition() {
      this.conditions.push({
        value: '',
        keyword: '',
      });
    },
    removeCondition(index) {
      this.conditions.splice(index, 1);
    },
  },
};
</script>

使用示例：

<template>
  <div>
    <search-bar :options="options" @search="handleSearch"></search-bar>
    <div v-for="(item, index) in searchResult" :key="index">{{ item }}</div>
  </div>
</template>

<script>
import SearchBar from '@/components/SearchBar';

export default {
  components: {
    SearchBar,
  },
  data() {
    return {
      options: [
        { label: '选项1', value: 'option1' },
        { label: '选项2', value: 'option2' },
        { label: '选项3', value: 'option3' },
      ],
      searchResult: [],
    };
  },
  methods: {
    handleSearch(params) {
      console.log(params);
      // 根据搜索条件进行搜索操作
      // 将搜索结果存储在 this.searchResult 中
    },
  },
};
</script>