ElementUI Tag标签的一些问题及解决方法

大杯美式不加糖

已于 2022-06-02 18:02:26 修改

阅读量4.7k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：业务技巧文章标签：前端 elementui

于 2022-03-29 11:02:41 首次发布

本文链接：https://blog.csdn.net/qq_40988677/article/details/123814577

业务技巧专栏收录该内容

27 篇文章

订阅专栏

本文针对Element UI中的Tag组件出现的删除Bug进行详细分析，并提供了一种解决方案，包括如何正确处理标签重复导致的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天第一次在项目中用到 Tag 标签，使用前先根据官方文档写了一个小 demo，实现可移除的标签效果：

在这里插入图片描述
官方代码示例是这样的：

<template>
  <div>
    <el-tag
      :key="tag"
      v-for="tag in dynamicTags"
      closable
      :disable-transitions="false"
      @close="handleClose(tag)"
    >
      {{ tag }}
    </el-tag>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dynamicTags: ['标签一', '标签二', '标签三']
    }
  },
  methods: {
    handleClose(tag) {
      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1)
    }
  }
}
</script>

<style scoped lang="scss">
  .el-tag + .el-tag {
    margin-left: 10px;
  }
</style>

在网页上试一下是没问题的：

在这里插入图片描述
然而，我不经意间瞄到了 handleClose 中写的方法，觉得有点不对，用 indexOf 来确定位置的话，如果 tag 的名字重复，是不是就有问题了呢，于是我给 dynamicTags 加了一个 “标签一”：

data() {
  return {
    dynamicTags: ['标签一', '标签二', '标签三', '标签一']
  }
}

再到网页试试效果：

在这里插入图片描述
是不是出现了两个问题…第一个问题是我删除最后一个“标签一”，却把第一个“标签一”给删掉了；第二个问题是删除的动画好像有点问题；还有一个问题是页面会报错，因为有两个“标签一”，所以 key 值重复了。那么我们来一个一个解决：

首先是第一个删除的问题，这个一看就是逻辑的问题，官方文档示例中的方法如果遇到标签名一样的情况，肯定会出错，这里对 Tag 的 close 事件做一个修改；然后 key 值报错的问题，把 key 值修改一下让它成为唯一值就好了：

<template>
  <div>
    <el-tag
      :key="tag + index"
      v-for="(tag, index) in dynamicTags"
      closable
      :disable-transitions="false"
      @close="tag => handleClose(tag, index)"
    >
      {{ tag }}
    </el-tag>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dynamicTags: ['标签一', '标签二', '标签三', '标签一']
    }
  },
  methods: {
    handleClose(tag, index) {
      this.dynamicTags.splice(index, 1)
    }
  }
}
</script>