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

今天第一次在项目中用到 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>

改成了用下标 index 来确定位置的方式，现在效果如下：

可以看到删除最后一个“标签一”，第一个“标签一”不会受影响了。但是如果没有从最后一个标签开始删的话，动画的问题又会出现了：

这个频闪的问题查了半天也不知道是什么问题，本人暂时无法解决，直接一劳永逸把动画效果关了：

:disable-transitions="true"

如果有大佬知道原因的，欢迎交流 ~