vue.js - 如何使用vue Element-plus在不同的特定选项卡中修改相同的内容而不影响另一个选项卡

Question

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

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

Answer 1

这里的问题是，您正在使用唯一的数据变量来管理多个反应性目标，因此，为避免这种情况，您需要向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;
      })
    },

您可以在此处查看脚本的情绪化版本： https ://codesandbox.io/s/vigorous-sunset-smrlq?file=/src/components/tabs.vue:1098-1227

注意：在您的演示中，由于 CORS 问题，上传过程会失败，因此您需要在您的开发环境中进行测试。