el-autocomplete多选

<el-autocomplete
  v-model="state"
  :fetch-suggestions="querySearchAsync"
  placeholder="请输入内容"
  style="width: 300px"
  multiple
></el-autocomplete>

相关问题

el-autocomplete 多选

el-autocomplete 是 Element UI 组件库提供的一个自动完成组件，允许用户输入关键字，然后从备选项中选择匹配项。如果要使用 el-autocomplete 进行多选，我们可以参考以下步骤：

1. 修改 value 属性

在使用 el-autocomplete 进行多选时，我们需要将 value 属性的类型从字符串数组改为对象数组，因此我们需要定义一个新的变量来存储 el-autocomplete 的值。

2. 自定义 template

由于 el-autocomplete 的默认 template 只适用于单选模式，为了支持多选，我们需要自定义 template。我们可以使用 checkbox 或 tag 来展示每个备选项。

3. 自定义事件

在多选模式下，我们需要针对每个选项定义一个选中或取消选中的事件。在事件触发后，我们需要在新的值集合中添加或删除对应的对象。

4. 重写部分方法

为了正确处理多选模式下的 value 合并和备选项的显示，我们需要重写 el-autocomplete 的部分方法。

总之，实现 el-autocomplete 多选需要一些额外的工作，但是一旦我们完成了这些任务，我们就可以使用聚合数据来过滤列表，并且可以将任意数目的 el-autocomplete 值用于多个用例中。多选 el-autocomplete 的优点在于它提供了更大的灵活性，可以满足许多不同的需求。

el-autocomplete实现多选

el-autocomplete是Element UI库中的一个组件，用于实现输入框自动完成功能。如果要实现多选，在el-autocomplete组件中需要添加一个多选的标志，并且使用v-model绑定一个数组来存储选择的值。

具体实现步骤如下：

1. 在el-autocomplete组件上添加multiple属性，表示开启多选模式。例如：

<el-autocomplete
  v-model="selectedItems"
  :fetch-suggestions="querySearch"
  placeholder="请输入内容"
  :multiple="true"
>
</el-autocomplete>

2. 定义一个数组selectedItems，用于存储所选中的值。例如：

data() {
  return {
    selectedItems: []
  }
}

3. 在querySearch方法中，返回一个数组，用于显示下拉列表中的选项内容。例如：

querySearch(queryString, cb) {
  const items = [
    { value: '选项1' },
    { value: '选项2' },
    { value: '选项3' },
    { value: '选项4' },
    { value: '选项5' }
  ];
  const results = queryString ? items.filter(this.createFilter(queryString)) : items;
  cb(results);
},

4. 在createFilter方法中，定义一个过滤器，用于过滤出符合条件的选项。例如：

createFilter(queryString) {
  return (item) => {
    return item.value.indexOf(queryString) !== -1;
  };
},

5. 最后，将selectedItems数组绑定到需要提交的表单中，以实现多选的功能。

注意：如果需要限制已选项的个数，可以在selectedItems数组中添加一个限制条件。例如：

if (this.selectedItems.length === 3) {
  this.$message.warning('最多只能选择3个选项！');
  return false;
}