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

好的，这个问题我可以回答。如果你要封装一个支持多搜索条件的搜索栏公共组件，可以考虑以下步骤：

1. 创建一个组件 SearchBar，它包含一个输入框和一个搜索按钮，以及一个下拉框用于选择搜索条件。这个组件可以接收一个 props，用来指定搜索条件的选项。

2. 在 SearchBar 组件中，使用 ElementUI 的 Select 组件来渲染下拉框。当用户选择一个搜索条件时，将该条件存储在一个变量中。

3. 当用户点击搜索按钮时，将输入框中的值以及已选择的搜索条件一起传递给父组件进行搜索操作。

4. 在父组件中，根据传递的搜索条件和输入值进行搜索操作，并将搜索结果渲染出来。

5. 如果需要支持多搜索条件，可以在 SearchBar 组件中添加一个“添加条件”的按钮，当用户点击该按钮时，动态添加一个新的 Select 组件和一个输入框。同样，当用户点击搜索按钮时，将所有条件和输入值一起传递给父组件进行搜索操作。

这样就可以封装一个支持多搜索条件的搜索栏公共组件了。希望对你有所帮助。

相关问题

使用vue2加elementui使用无忧2.0+饿了蒙特组件库封装类似百度搜索栏的组件，要求包含防抖节流功能及数据实时展示

首先，需要安装 ElementUI 和无忧2.0组件库：

npm install element-ui
npm install @mengt/element-ui

然后，创建一个 SearchBox.vue 组件：

<template>
  <el-input :value="keyword" @input="handleInput" placeholder="请输入关键字"></el-input>
</template>

<script>
import { debounce } from 'lodash'

export default {
  name: 'SearchBox',
  props: {
    delay: {
      type: Number,
      default: 300
    }
  },
  data () {
    return {
      keyword: ''
    }
  },
  methods: {
    handleInput: debounce(function (value) {
      this.keyword = value
      this.$emit('input', value)
    }, this.delay)
  }
}
</script>

这里使用了 lodash 库中的 debounce 函数来实现防抖功能。在用户输入时，会触发 handleInput 方法，该方法使用 debounce 函数对输入进行防抖处理，并将最终的关键字通过 $emit 发送给父组件。

接着，在父组件中使用 SearchBox 组件，并实时展示数据：

<template>
  <div>
    <SearchBox v-model="keyword" @input="search" />
    <ul>
      <li v-for="item in filteredData">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
import { throttle } from 'lodash'

export default {
  name: 'Demo',
  data () {
    return {
      keyword: '',
      data: ['apple', 'banana', 'orange', 'pear', 'grape']
    }
  },
  computed: {
    filteredData () {
      return this.data.filter(item => item.includes(this.keyword))
    }
  },
  methods: {
    search: throttle(function (value) {
      console.log('search', value)
    }, 1000)
  }
}
</script>

在父组件中，使用 computed 属性对 data 进行筛选，只展示包含关键字的数据。同时，使用 throttle 函数来实现节流功能，减少搜索请求的次数。

最后，将父组件渲染到页面中：

<template>
  <div id="app">
    <Demo />
  </div>
</template>

<script>
import Demo from '@/components/Demo.vue'

export default {
  name: 'App',
  components: {
    Demo
  }
}
</script>

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>