vue+elementUI实现空格或回车在input内添加小标签的功能

1

---

2

---

3

现在要做的就是实现上图的功能

瞄了一哈elementUI的Input实例,发现并没有我需要的样式,但是在参数中看到了自己需要的东西

话不多说,上代码了.

1.template中的样式

<el-form ref="form" :model="form">
    <el-form-item label="知识点">
        <el-select v-model="form.knowledge" clearable multiple filterable allow-create default-first-option placeholder="输入知识点内容，用回车添加">
            <el-option v-for="item in knowledge" :key="item.value" :label="item.label" :value="item.label"></el-option>
        </el-select>
    </el-form-item>
</el-form>

2.模拟数据

export default {
  data() {
    return {
      knowledge: [
        { label: "知识点1" },
        { label: "知识点2" },
        { label: "知识点3" }
      ],
      form: {}
    }
}