elementui tabs动态标签

渲染已有标签（content为组件的方式引入）和 增加tab

<template>
  <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick" editable @edit="handleTabsEdit">
    <el-tab-pane v-for="item in editableTabs" :key="item.name" :label="item.title" :name="item.name">
      <component :is="item.content" :objId="item.name"></component>
    </el-tab-pane>
  </el-tabs>
</template>
<script  setup>
import { ref, shallowRef, defineAsyncComponent } from 'vue'
import firstContentVue from './tabs/firstContent.vue';
import secondContentVue from './tabs/secondContent.vue';
const activeName = ref('first')
const name = ref('Rich')
const index = ref(0)
const editableTabs = ref([
  {
    title: 'User',
    name: 'first',
    content: shallowRef(firstContentVue),
  },
  {
    title: 'Config',
    name: 'second',
    content: shallowRef(secondContentVue),
  },
])

const handleClick = (event) => {
  console.log(event)
}
const handleTabsEdit = (targetName,action) => {
  console.log(targetName)
  console.log(action)
  if (action === 'add') {
    const i = name.value === 'Rich' ? name.value : 'Table'
    index.value++
    const newTableTitle = `New Tab${index.value}`
    const newTabName = `third${index.value}`
    editableTabs.value.push({
      title: newTableTitle,
      name: newTabName,
      content: shallowRef(defineAsyncComponent(() => import(`./tabs/public${i}.vue`))),
    })
    activeName.value = newTabName
  }
}
</script>
<style scoped>
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
</style>

简单说明：
（1）shallowRef 是为解决下面这个错误的

Vue received a Component which was made a reactive object. This can lead to unnecessary performance overhead, and should be avoided by marking the component with `markRaw` or using `shallowRef` instead of `ref`. 
Component that was made reactive: 

Vue接收到一个组件，该组件被设置为反应对象。这可能导致不必要的性能开销，应通过使用“markRaw”标记组件或使用“shallowRef”而不是“ref”来避免。

活性成分：

（2）defineAsyncComponent是为解决下面的错误

[Vue warn]: Invalid VNode type: undefined (undefined)

[Vue warn]：无效的VNode类型：未定义（未定义）

（3）代码中public组件 中包含一个input和一个button ,经测试，相同组件，新增加的tab,input 输入不同的值，tab页是不同的。