antdesign tag 组件关闭多删除问题

最新推荐文章于 2023-08-31 16:27:34 发布

想学吉他！

最新推荐文章于 2023-08-31 16:27:34 发布

阅读量604

点赞数 1

分类专栏： antdesign-vue 文章标签： vue.js javascript 前端 css

本文链接：https://blog.csdn.net/ccqsss/article/details/127106178

版权

antdesign-vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文介绍了AntDesign Tag组件在使用过程中出现的多删除问题及其原因。问题在于当使用索引(index)作为key时，由于回调函数close会根据key操作数组，导致意外删除多个标签。解决方法是使用遍历项的唯一标识如id作为key，确保每个Tag的唯一性，从而避免多删除的问题。提供了一个错误示例和正确示例代码进行对比说明。

摘要由CSDN通过智能技术生成

antdesign tag 组件关闭多删除问题

问题：点击 tag 组件右边的 × 号，会一下子删除两个 tag 标签(真是稀奇古怪)

原因：close 作为关闭时的回调，会根据你 v-for 遍历循环时的 key 对相应的标签变化，同时可以在回调中通过这个关键 key 来删除数组中的对应元素

方法：不要为了图省事在 v-for 时直接将 index 作为 :key ,换作遍历项的 id 最好，多删除的问题也迎刃而解了。

示例代码

//错误示例
<a-tag v-for="(item,index) in 数组" :key="index" @close="log">Tag 1</a-tag>

//正确示例
 <a-tag v-for="(item,index) in 数组" :key="item.id" @close="log">Tag 1</a-tag>