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

Question

For example, I want to display the Table after uploading the file on tab 1, but it will not affect tab 2.

My code is here：https://codesandbox.io/s/stupefied-feather-uuv4m?file=/src/App.vue

Answer 1

The problem here is, you are using unique data vars to manage multiple reactive objectives, so, to avoid this, you need to add unique vars/properties to your editableTabs data:

       editableTabs: [
        {
          title: "File Name 1",
          name: "1",
          showTable: false, // <===
          showUpload: true  // <===
        },
        {
          title: "File Name 2",
          name: "2",
          showTable: false,  // <===
          showUpload: true   // <===
        },
      ],

Next you need to modify your template to react to the new properties from editableTabs:

      <UploadFile v-if="item.showUpload" @changee="changeStatus(item)" />
      <TableBox v-if="item.showTable" />

Finally, you need to modify your method changeStatus to commit the changes correctly.

    changeStatus(item) {
      nextTick(() => {
        item.showUpload = false;
        item.showTable = true;
      })
    },

You can see an moodify version of your script here: https://codesandbox.io/s/vigorous-sunset-smrlq?file=/src/components/tabs.vue:1098-1227

Note: in your demo, the upload process will fail because CORS issue, so you need to test in your dev environment.