el-tab-pane绑定数据id

在使用 el-tab-pane 组件时，可以通过绑定数据的 id 属性来实现与选项卡面板的对应关系。具体实现步骤如下：

1. 在 tab-pane 组件中，使用 v-for 循环遍历数据，同时绑定数据的 id 属性。

<el-tabs v-model="activeTab">
  <el-tab-pane v-for="(item, index) in tabData" :key="index" :label="item.label" :name="item.name" :id="item.id">
    <!-- tab-panel 内容 -->
  </el-tab-pane>
</el-tabs>

2. 在数据中定义每个选项卡对应的 id 值。

data() {
  return {
    activeTab: 'tab1',
    tabData: [
      {
        label: '选项卡1',
        name: 'tab1',
        id: 'tab-panel-1'
      },
      {
        label: '选项卡2',
        name: 'tab2',
        id: 'tab-panel-2'
      }
    ]
  }
}

3. 在业务逻辑中，可以通过 activeTab 的值来获取当前选中的选项卡的 id 值，从而实现数据与选项卡面板的对应关系。

methods: {
  handleTabChange(tab) {
    console.log(tab.$attrs.id); // 获取当前选项卡对应的 id 值
  }
}

通过以上步骤，就可以实现 el-tab-pane 组件与数据之间的绑定，并且方便地获取当前选中的选项卡对应的数据。