new-zx-front-admin/src/views/system/sale/merchant/components/MerchantIndex.vue

<template>
  <el-dialog :model-value="dialogVisible" @update:model-value="updateDialogVisible" class="custom-dialog">
    <div class="dialog-content">
      <div class="tabs-section">
        <el-tabs v-model="activeTab" tab-position="left">
          <el-tab-pane v-for="tab in tabs" :key="tab.name" :label="tab.title" :name="tab.name" />
        </el-tabs>
      </div>
      <div class="component-section">
        <component :is="currentComponent" />
      </div>
    </div>
  </el-dialog>
</template>

<script setup>
import { ref, watch, defineAsyncComponent } from 'vue';

const props = defineProps({
  dialogVisible: Boolean,
  tabs: Array, // 父组件传来的tabs数组，每个tab对象包含title和name属性
  components: Object // 父组件传来的组件地址映射，键为tab.name，值为组件路径字符串
});

const emit = defineEmits(['update:dialogVisible']);
const componentMap = props.components;

const activeTab = ref(props.tabs[0]?.name || '');
const currentComponent = ref(null);

watch(activeTab, (newTab) => {
  if (componentMap[newTab]) {
    const componentPath = componentMap[newTab];
    currentComponent.value = defineAsyncComponent(() =>
      import(/* webpackChunkName: "[request]" */ componentPath)
    );
  }
}, { immediate: true });

function updateDialogVisible(value) {
  emit('update:dialogVisible', value);
}
</script>

<style scoped>
.custom-dialog .dialog-content {
  display: flex;
}

.tabs-section {
  flex: 1;
}

.component-section {
  flex: 3;
}
</style>