antdesign的tag close方法关闭两个tag

关闭两个tag

 <a-tag v-for="(item,index) in form.value8" :key="index" color="blue" closable @close="closTag(index)">
    {{ item }}
</a-tag>
closeTag(index) {
  this.form.value8.splice(index, 1);
}

tag的key千万不要用index

 

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Ant Design Vue 中,可以使用 `a-tabs` 和 `a-tab-pane` 组件来实现选项卡功能。如果您想要通过标签页上的关闭按钮关闭选项卡,可以通过自定义选项卡标签来实现。 例如: ```vue <template> <a-tabs v-model:selectedTab="selectedTab"> <a-tab-pane v-for="(pane, index) in panes" :key="pane.key" :tab="renderTabTitle(pane)"> {{ pane.content }} </a-tab-pane> </a-tabs> </template> <script> export default { data() { return { selectedTab: '1', panes: [ { key: '1', title: 'Tab 1', content: 'Content of Tab Pane 1' }, { key: '2', title: 'Tab 2', content: 'Content of Tab Pane 2' }, { key: '3', title: 'Tab 3', content: 'Content of Tab Pane 3' } ] } }, methods: { renderTabTitle(pane) { return ( <span> {pane.title} <a-icon type="close" class="tab-close-icon" onClick={e => this.handleTabClose(pane.key, e)} /> </span> ) }, handleTabClose(key, e) { e.stopPropagation() const index = this.panes.findIndex(pane => pane.key === key) if (index !== -1) { this.panes.splice(index, 1) } } } } </script> ``` 在上面的示例中,通过在 `renderTabTitle` 方法中自定义选项卡标签,将选项卡标题和关闭按钮放在同一个 `span` 元素中。当点击关闭按钮时,会触发 `handleTabClose` 方法,根据选项卡的 `key` 值来从 `panes` 数组中删除对应的选项卡数据。需要注意的是,在关闭按钮的 `onClick` 事件中,需要调用 `e.stopPropagation()` 方法来防止事件冒泡。同时,可以通过 CSS 样式来美化关闭按钮的样式,例如: ```css .tab-close-icon { margin-left: 8px; vertical-align: middle; color: #999; cursor: pointer; } .tab-close-icon:hover { color: #f5222d; } ``` 这样就可以通过标签页上的关闭按钮来关闭选项卡了。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值