Vxe UI 根据vxe-tabs 绑定不同的值，渲染生成不同的 tabls（页签）内容

VxeUI tabs控件，根据绑定不同的内容，动态渲染不同的表格数据放置在不同的 tab 页

1. 效果图如下：

2. 代码实现

<template>
        <vxe-tabs :options="detailTabList">
        <vxe-tab-pane v-for="(item, index) in detailTabList" :key="index" :name="item.name" :title="item.title">
            <!-- 根据当前 Tab 名称动态绑定配置 -->
            <vxe-grid :ref="`detailTableRef_${item.name}`" v-bind="gridDetailOptions[item.name]"
                :row-config="{ isCurrent: true }">
            </vxe-grid>
        </vxe-tab-pane>
       </vxe-tabs>
</template>

<script setup>
     // Tab 列表 
     const detailTabList = ref([
     { name: 'tab1', title: '明细1' },
     { name: 'tab2', title: '明细2' }
     ]);
	 
	 const gridDetailOptions = {
   tab1: {
     border: true,
     columns: [
      { type: 'seq', width: 70 },
      { field: 'name', title: 'Name' },
      { field: 'sex', title: 'Sex' },
      { field: 'age', title: 'Age' }
     ],
    data: [
      { id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'test abc' },
      { id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },
      { id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' },
      { id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai' }
    ]
   },
   tab2: {
     border: false,
     columns: [
       { type: 'seq', width: 60 },
       { field: 'product', title: 'Product' },
       { field: 'price', title: 'Price' }
     ],
     data: [
       { product: 'Test1',  price: 'test abc' },
       { product: 'Test2', price: 'test abc' },
       { product: 'Test3', price: 'test abc' },
     ]
   }
 };
</script>