如何使用vue Element-plus修改不同特定tab中的相同内容而不影响其他tab

Question

比如我想在tab 1上传文件后显示Table，但不会影响tab 2

我的代码在这里：https://codesandbox.io/s/stupefied-feather-uuv4m?file=/src/App.vue

Answer 1

这里的问题是，您正在使用独特的数据变量来管理多个反应性目标，因此，为避免这种情况，您需要将独特的 vars/properties 添加到您的 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问题而失败，所以您需要在您的开发环境中进行测试。

如何使用vue Element-plus修改不同特定tab中的相同内容而不影响其他tab

How to use vue Element-plus to modify the same content in different specific tabs without affecting another tab

tabs

vue.js

element-plus