vue使用el-tag完成添加标签操作

1. 安装Element UI

如果你还没有安装Element UI，可以通过npm或yarn来安装：

npm install element-ui --save
# 或者
yarn add element-ui

2. 引入Element UI

在你的Vue项目中的main.js或者相应的入口文件中引入Element UI：

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

3. 实现添加标签功能

在你的Vue组件中，你可以如下实现一个基本的添加标签的功能：

<template>
  <div>
    <el-input
      v-model="inputValue"
      placeholder="请输入标签名称"
      @keyup.enter="addTag"
    ></el-input>
    <el-tag
      v-for="(tag, index) in tags"
      :key="index"
      closable
      @close="removeTag(index)"
    >
      {{ tag }}
    </el-tag>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputValue: '',
      tags: [],
    };
  },
  methods: {
    addTag() {
      if (this.inputValue.trim() !== '' && !this.tags.includes(this.inputValue)) {
        this.tags.push(this.inputValue.trim());
        this.inputValue = ''; // 清空输入框
      }
    },
    removeTag(index) {
      this.tags.splice(index, 1);
    },
  },
};
</script>