卡片组件封装，减少重复

<!-- DiseaseCard.vue -->
<template>
  <el-card class="box">
    <div slot="header" class="clearfix">
      <span class="title">{{ diseaseName }}</span>
      <el-button type="text" style="float: right; padding: 5px 1px">
        特征维护
      </el-button>
    </div>
    <div>
      <div style="height: 30vh; width: 100%;">
        <component :is="chartComponent" />
      </div>
    </div>
  </el-card>
</template>

<script>
export default {
  props: {
    diseaseName: {
      type: String,
      required: true
    },
    chartComponent: {
      type: String,
      required: true
    }
  }
}
</script>

然后，在父组件中，你可以定义一个数组，包含每种疾病的名字和对应的图表组件名称。使用v-for来循环这个数组，并渲染DiseaseCard组件。

<template>
  <div>
    <!-- 循环渲染疾病卡片 -->
    <DiseaseCard
      v-for="disease in diseases"
      :key="disease.name"
      :diseaseName="disease.name"
      :chartComponent="disease.chartComponent"
    />
  </div>
</template>

<script>
import DiseaseCard from './DiseaseCard.vue';

export default {
  components: {
    DiseaseCard
  },
  data() {
    return {
      diseases: [
        { name: '发热伴出血症候群', chartComponent: 'TestPie1' },
        { name: '发热伴出疹症候群', chartComponent: 'TestPie2' },
        { name: '脑炎脑膜炎症候群', chartComponent: 'TestPie3' }
      ]
    }
  }
}
</script>