如何使用vue Element-plus在不同的具体页签中修改相同的内容，而不影响另一个页签
如何使用vue Element-plus在不同的具体页签中修改相同的内容，而不影响另一个页签
提问于 2021-03-13 11:50:41
例如，我希望在上传选项卡1上的文件后显示该表，但这不会影响选项卡2。
我的代码在这里：https://codesandbox.io/s/stupefied-feather-uuv4m?file=/src/App.vue
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-03-13 20:41:56
这里的问题是，您正在使用唯一的数据变量来管理多个反应性目标，因此，为了避免这种情况，您需要向您的editableTabs数据添加唯一的变量/属性：
editableTabs: [
{
title: "File Name 1",
name: "1",
showTable: false, // <===
showUpload: true // <===
},
{
title: "File Name 2",
name: "2",
showTable: false, // <===
showUpload: true // <===
},
],接下来，您需要修改模板以响应来自editableTabs的新属性
<UploadFile v-if="item.showUpload" @changee="changeStatus(item)" />
<TableBox v-if="item.showTable" />最后，您需要修改您的方法changeStatus以正确地提交更改。
changeStatus(item) {
nextTick(() => {
item.showUpload = false;
item.showTable = true;
})
},您可以在此处查看脚本的moodify版本：https://codesandbox.io/s/vigorous-sunset-smrlq?file=/src/components/tabs.vue:1098-1227
注意:在您的demo中，上传过程会因为CORS问题而失败，因此您需要在您的开发环境中进行测试。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/66609949
复制相关文章
相似问题
腾讯云开发者
