Cold_putoutstorage_web/src/views/personalInfo/index.vue

<!--  -->
<template>
    <div class="personalInfo">
        <el-tabs v-model="activeName" tab-position="top" class="demo-tabs" @tab-click="handleClick">
            <el-tab-pane :label="item.label" :name="item.name" v-for="(item,index) in tabData" :key="index">
                <tables :requestApi="CompanyTree" :columns="columns" :initParam="initParam" v-if="item.name==activeName">
                    <template #right="{ row }">
                        <el-button link type="primary" size="small">编辑</el-button>
                        <el-button link type="danger" size="small">删除</el-button>
                    </template>
                </tables>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script setup lang="ts">
import tables from "@/components/table.vue";
import tableCustom from "@/components/tableCustom.vue";

import { CompanyTree } from "@/api/index";
import {ref} from "vue";
import type { TabsPaneContext } from 'element-plus'

const tabData = [
    { name: 'first', label: '疫苗名称' },
    { name: 'first1', label: '生产企业' },
    { name: 'first2', label: '规格' },
    { name: 'first3', label: '剂型' },
    { name: 'first4', label: '单位' },
]
const activeName = ref('first')
// 渲染表格
const columns: any = [
    { type: 'index', label: '编号', width: 80, },
    { prop: 'T_D_name', label: '名称', width: 200 },
    { prop: 'operation', label: '操作', fixed: 'right', 'min-width': 200 }
]
//请求参数
const initParam = { T_name: '' }
const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event)
}

</script>
<style lang="scss">
/* @import url(); 引入css类 */
.personalInfo {
    background: var(--y-card-background);
    padding: var(--y-padding);
}
</style>