关于antd-vue:antd-vue-使用tag组件时调用close会关闭2个标签已解决

37次阅读

共计 494 个字符,预计需要花费 2 分钟才能阅读完成。

antd vue 应用 tag 组件时,调用 close 会先后敞开 2 个标签

代码是这样的

<template v-for="(tag, index) in tags">
  <a-tag :key="index" :closable="true" @close="() => handleClose(tag)">
    {{tag.classify_name}}
  </a-tag>
</template>
// 删除标签
handleClose (tag) {const tags = this.tags.filter(item => item.id !== tag.id)
  this.tags = tags
},

解决办法:tag 组件的 key 不要应用索引,改成相似 id 这样的字段

应用索引导致删除了 2 次索引为 i 的值,看起来删除了 2 个标签
(当然就算应用索引也不应该删 2 次,是 antd vue 的锅)

批改后,问题解决

<template v-for="tag in tags">
  <a-tag :key="tag.id" :closable="true" @close="() => handleClose(tag)">
    {{tag.classify_name}}
  </a-tag>
</template>

正文完
 0