Element-UI Select 下拉框实现如 Ant Design Select 的自动分词

因为我们项目上使用的是 Element-UI 框架，但是业务上又需要使用自动分词的场景，如果你也不愿意安装 Ant Design，可以根据下面的操作给 el-select 组件加上自动分词。

分析

要实现自动分词，我们可以考虑从两个方向入手。

首先我们可以直接在输入的时候分割，但是这样会导致有多个选项，这样就会多次点击操作，用户体验非常不好。

所以我们采用第二种方法，在点击之后分割，下面是具体实现。

实现

假设你已经复制了一个 el-select 到自己项目的全局组件目录。我们只需要修改其中的 select-vue 文件即可。

首先，我们接收一个参数 tokenSeparators，默认为 ''，然后在 handleOptionSelect 方法中添加如下代码：

// ...
// line 691
if (this.allowCreate && this.tokenSeparators) {
  const valueSet = new Set()  // 去重，避免 duplicate Key 错误
  for (const item of value) {
    valueSet.add(item)
  }

  option.value.split(this.tokenSeparators).forEach(item => {
    if (!valueSet.has(item)) {
      value.push(item)
      valueSet.add(item)
    }
  })
} else {
  value.push(option.value)
}
// ...

效果如下：

注意：需要注释或删除引入 ElScrollbar 包的代码，否则会报以下错误：