xmhjc-front-end/connect/E-mail/mail/com/right/contract/index.vue

<template>
  <div>
    <!-- <el-tabs v-model="contractName" style="font-size: 12px">
      <el-tab-pane label="报价单" name="1">
        <Quotation> </Quotation>
      </el-tab-pane>
      <el-tab-pane label="PI" name="2"> <Pi></Pi> </el-tab-pane>
    </el-tabs> -->
    <el-radio-group
      v-model="contractName"
      size="mini"
      style="margin: 5px 0px 15px"
    >
      <el-radio-button label="1">报价单</el-radio-button>
      <el-radio-button label="2">PI</el-radio-button>
    </el-radio-group>
    <div>
      <Quotation v-show="contractName === '1'"> </Quotation>
      <Pi v-show="contractName === '2'"></Pi>
    </div>
  </div>
</template>

<script setup>
import Quotation from "./quotation";
import Pi from "./pi";
const contractName = ref("");
contractName.value = "1";
</script>

<style lang="scss" scoped>
:deep(.el-radio-button__inner) {
  font-size: 13px;
  padding: 6px 10px;
}
</style>