Vue使用element-ul输入框input模糊查询加多选功能

在Vue中结合Element UI实现输入框的模糊查询加多选功能，可以使用el-select组件配合el-option实现多选，并结合el-input进行模糊查询。以下是一个简单的示例：

<template>
  <el-select
    v-model="selectedValues"
    multiple
    filterable
    allow-create
    default-first-option
    placeholder="请输入关键词进行搜索"
    @change="handleChange"
  >
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    ></el-option>
  </el-select>
</template>
 
<script>
export default {
  data() {
    return {
      selectedValues: [],
      options: [
        { label: '选项1', value: 'option1' },
        { label: '选项2', value: 'option2' },
        { label: '选项3', value: 'option3' },
        // ...更多选项
      ],
    };
  },
  methods: {
    handleChange(value) {
      console.log('Selected: ', value);
      // 处理选中值变化
    },
  },
};
</script>

在这个示例中，el-select组件设置了multiple属性来启用多选功能，filterable属性允许输入搜索，allow-create属性允许创建新选项，default-first-option属性使得在输入框中输入时第一个选项为默认选项。

el-option组件用于渲染每个选项，通过v-for指令和options数组动态渲染。

selectedValues数组用于双向绑定选中的值，可以在handleChange方法中处理选中值的变化。

请确保你已经安装并正确引入了Element UI库，并在Vue项目中正确配置。