elementui标签

ElementUI 标签的基本使用

ElementUI 提供 <el-tag> 组件用于展示标签信息，支持多种样式和交互功能。

基础用法
通过 type 属性设置标签类型，可选值包括 success、info、warning、danger 或留空（默认）。

<el-tag>默认标签</el-tag>
<el-tag type="success">成功标签</el-tag>
<el-tag type="danger">危险标签</el-tag>

可关闭标签
添加 closable 属性实现可关闭标签，需监听 close 事件处理关闭逻辑。

<el-tag 
  closable 
  @close="handleClose">
  可关闭标签
</el-tag>

methods: {
  handleClose() {
    // 关闭逻辑
  }
}

动态编辑标签
结合 v-for 和数组操作实现动态标签管理。

<el-tag 
  v-for="(tag, index) in tags" 
  :key="index"
  closable
  @close="removeTag(index)">
  {{ tag }}
</el-tag>

data() {
  return {
    tags: ['标签1', '标签2', '标签3']
  };
},
methods: {
  removeTag(index) {
    this.tags.splice(index, 1);
  }
}

自定义标签样式

通过 color 属性自定义背景色，或使用 CSS 覆盖默认样式。

<el-tag color="#f0f9eb">自定义颜色</el-tag>

标签尺寸控制

使用 size 属性调整标签大小，可选值：medium、small、mini。

<el-tag size="small">小标签</el-tag>

与其他组件结合

标签常与输入框结合实现标签输入功能，例如 el-input 的 @keyup.enter 事件触发添加标签。

示例代码

<el-input 
  v-model="inputValue"
  @keyup.enter="addTag"
  placeholder="输入后按回车添加标签">
</el-input>
<el-tag 
  v-for="(tag, index) in tags"
  :key="index"
  closable
  @close="removeTag(index)">
  {{ tag }}
</el-tag>

data() {
  return {
    inputValue: '',
    tags: []
  };
},
methods: {
  addTag() {
    if (this.inputValue) {
      this.tags.push(this.inputValue);
      this.inputValue = '';
    }
  },
  removeTag(index) {
    this.tags.splice(index, 1);
  }
}