Use Dropdown in TABS to define a drop-down menu: visible="true", it will be rendered twice

[mengyu987]

• I have searched the issues of this repository and believe that this is not a duplicate.

Version

3.0.0-beta.10

Environment

win11 vue3

Reproduction link

https://codesandbox.io/s/mystifying-hugle-sw680i?file=/src/demo.vue

Steps to reproduce

{{ item.title }}

• 重命名
• 复制视图
• 删除视图

• 表格视图
• 图表视图

<script setup> import {nextTick, reactive} from "vue"; // 引入样式 import "./css/tabs.less"; // 引入表格 import Table from "./table.vue"; // 引入jq import $ from "jquery"; import { PlusOutlined } from "@ant-design/icons-vue" import { Tabs, TabPane, Dropdown } from "ant-design-vue" // 默认需要用到的属性 const state = reactive({ activeKey: 1, // 添加视图的下拉菜单 addVisible:false, // 假数据 tableViewArr: [ {title: "视图1", id: 1, tabsDropdown: false, isInput: false}, {title: "视图2", id: 2, tabsDropdown: false, isInput: false}, {title: "视图3", id: 3, tabsDropdown: false, isInput: false}, ], }); // 重命名方法 const rename = (item, index) => { state.tableViewArr[index].tabsDropdown = false; state.tableViewArr[index].isInput = true; nextTick(() => { $(".tablesInput-tab").focus(); }) }; // 文本框失去焦点事件 const inputBlur = (index) => { state.tableViewArr[index].isInput = false; }; // 下拉菜单的改变事件 const tabVisibleChange = (e, index) => { console.log(e); state.tableViewArr[index].tabsDropdown = e; }; // 添加视图的下拉菜单改变事件 const addDropdownChange = (e) =>{ console.log(e); state.addVisible = e; } const onEdit = (e) =>{ console.log(e); } console.log("哈哈") </script> <style scoped> </style>

What is expected?

期望修复

What is actually happening?

重复渲染

[github-actions]

Hello @mengyu987. Please provide a online reproduction by forking this link for vue2、 link for vue3 or a minimal GitHub repository. Make sure to choose the correct version.

你好 @mengyu987, 我们需要你提供一个在线的重现实例以便于我们帮你排查问题。你可以通过点击 此处 for vue2、 此处 for vue3 创建一个 codesandbox 或者提供一个最小化的 GitHub 仓库。请确保选择准确的版本。

[tangjinzhou]

#4271

[mengyu987]

我在找在线链接，我找到了会放上来

[mengyu987]

https://codesandbox.io/s/mystifying-hugle-sw680i?file=/src/demo.vue 这个是在线链接，但是进去会报找不到模块，刷新下就好了，然后进去点击那个click me按钮

[mengyu987]

@tangjinzhou

[tangjinzhou]

ref ant-design/ant-design#27699

[mengyu987]

参考蚂蚁设计/蚂蚁设计#27699
啊？？ 我有点不太理解，没有看到解决方案呀宝贝

[tangjinzhou]

只是记录相关 issue，暂时没有好的解决方案

你可以试试将最后一个 tabpane 做成 click me

[mengyu987]

只是记录相关问题，暂时没有好的解决方案

你可以尝试将最后一个 tabpane 点击我

好的呀！ 谢谢你呀！ 么么