利用el-tabs根据后端接口id在el-tab-plan显示不同的内容

可以通过监听`el-tabs`的`tab-click`事件，在点击不同的标签页时，根据标签页的`id`属性去请求后端接口获取对应的内容并渲染到`el-tab-pane`中。

以下是一个简单的示例代码：

<template>
  <div>
    <el-tabs v-model="activeTab" @tab-click="handleTabClick">
      <el-tab-pane label="标签页1" name="1" :key="1">
        <p>{{ content1 }}</p>
      </el-tab-pane>
      <el-tab-pane label="标签页2" name="2" :key="2">
        <p>{{ content2 }}</p>
      </el-tab-pane>
      <el-tab-pane label="标签页3" name="3" :key="3">
        <p>{{ content3 }}</p>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        activeTab: '1',
        content1: '',
        content2: '',
        content3: ''
      }
    },
    methods: {
      handleTabClick(tab) {
        this.fetchContent(tab.name)
      },
      fetchContent(tabId) {
        // 根据tabId发送请求获取对应的内容
        // 这里假设请求返回的数据是一个字符串
        const url = `/api/content/${tabId}`
        axios.get(url).then(res => {
          switch (tabId) {
            case '1':
              this.content1 = res.data
              break
            case '2':
              this.content2 = res.data
              break
            case '3':
              this.content3 = res.data
              break
            default:
              break
          }
        })
      }
    }
  }
</script>

上述代码中，`el-tabs`组件绑定了`activeTab`属性，表示当前选中的标签页的`name`属性值。在`tab-click`事件触发时，调用`handleTabClick`方法，根据当前标签页的`name`属性值去请求对应的内容。请求返回后，根据当前标签页的`name`属性值，更新相应的组件的数据，从而实现在`el-tab-pane`中显示不同的内容。