element-plus中el-empty空盒子组件和Collapse 折叠面板组件的使用 ...

一.el-empty空盒子组件的使用

   直接复制下面的代码：

1. <el-empty description="description" />

复制代码

  展示效果：
  

   还可以自界说笔墨描述：

1. <el-empty description="暂未选择患者"/>

复制代码

二.Collapse 折叠面板组件的使用

   复制下面的代码：

1. <template>
2.   <div>
3.     <el-button @click="show = !show">Click Me</el-button>
5.     <div style="margin-top: 20px">
6.       <el-collapse-transition>
7.         <div v-show="show" style="height: 400px">
8.           <div class="transition-box">el-collapse-transition</div>
9.           <div class="transition-box">el-collapse-transition</div>
10.         </div>
11.       </el-collapse-transition>
12.     </div>
13.   </div>
14. </template>
16. <script setup>
17. import { ref } from 'vue'
19. const show = ref(true)
20. </script>
22. <style>
23. .transition-box {
24.   margin-bottom: 10px;
25.   width: 200px;
26.   height: 100px;
27.   border-radius: 4px;
28.   background-color: #409eff;
29.   text-align: center;
30.   color: #fff;
31.   padding: 40px 20px;
32.   box-sizing: border-box;
33.   margin-right: 20px;
34. }
35. </style>

复制代码

  效果展示：
  

   代码解读：
  ①自界说变量show
  ②v-show="show"这个属性，控制着折叠面板的显示。
  ③添加一个按钮，一点击就修改show的值，从而控制折叠面板是否显示。
  


三.综合练习

   标题要求：
  刚打开页面时，我们不显示患者病历表单，而是展示空盒子（表示门诊大夫暂未选择看诊的患者）。等到大夫选择了某个患者后，才会展示出患者病历表单。
    代码大致思路：
  ①先界说变量isChoose ，控制病历表单是否显示

1. const isChoose = ref(false);

复制代码

②界说一个卡片，内里分别存放空盒子组件和折叠面板，然后根据情况展示二者之一即可。

1. <!-- 卡片（患者病历表单填写） -->
2. <el-card  style="width:976px;" shadow="hover" >
3.     <!-- 情况1：一开始显示空盒子 -->
4.     <el-empty description="暂未选择患者" v-show="!isChoose" />
5.     <!-- 情况2：选择某个待诊患者后，显示出病例表单 -->
6.     <el-collapse-transition>
7.         <div v-show="isChoose"  style="height:600px;width:100%;">
8.             <el-form :model="medicalRecordDto" label-position="top">
9.                 <!-- 第一行 -->
10.                 <el-row>
11.                     <el-col :span="12">
12.                         <el-form-item label="主诉">
13.                             <el-input type="textarea"  v-model="medicalRecordDto.chiefComplaint" placeholder="请输入主诉" style="width: 300px;margin-right: 10px" clearable></el-input>
14.                         </el-form-item>
15.                     </el-col>
16.                     <el-col :span="12">
17.                         <el-form-item label="现病史">
18.                             <el-input type="textarea"  v-model="medicalRecordDto.present" placeholder="请输入患者现病史" style="width: 300px;margin-right: 10px" clearable></el-input>
19.                         </el-form-item>
20.                     </el-col>
21.                 </el-row>
22.                 <!-- 第二行 -->
23.                 <el-row>
24.                     <el-col :span="12">
25.                         <el-form-item label="现病治疗情况">
26.                             <el-input type="textarea"  v-model="medicalRecordDto.presentTreat" placeholder="请输入现病治疗情况" style="width: 300px;margin-right: 10px" clearable></el-input>
27.                         </el-form-item>
28.                     </el-col>
29.                     <el-col :span="12">
30.                         <el-form-item label="既往史">
31.                             <el-input type="textarea"  v-model="medicalRecordDto.history" placeholder="请输入既往史" style="width: 300px;margin-right: 10px" clearable></el-input>
32.                         </el-form-item>
33.                     </el-col>
34.                 </el-row>
35.                 <!-- 第三行 -->
36.                 <el-row>
37.                     <el-col :span="12">
38.                         <el-form-item label="过敏史">
39.                             <el-input type="textarea"  v-model="medicalRecordDto.allergy" placeholder="请输入过敏史" style="width: 300px;margin-right: 10px" clearable></el-input>
40.                         </el-form-item>
41.                     </el-col>
42.                     <el-col :span="12">
43.                         <el-form-item label="体格检查">
44.                             <el-input type="textarea"  v-model="medicalRecordDto.physique" placeholder="请输入体格检查" style="width: 300px;margin-right: 10px" clearable></el-input>
45.                         </el-form-item>
46.                     </el-col>
47.                 </el-row>
48.                 <!-- 第四行 -->
49.                 <el-row>
50.                     <el-col :span="12">
51.                         <el-form-item label="检查建议">
52.                             <el-input type="textarea"  v-model="medicalRecordDto.proposal" placeholder="请输入检查建议" style="width: 300px;margin-right: 10px" clearable></el-input>
53.                         </el-form-item>
54.                     </el-col>
55.                     <el-col :span="12">
56.                         <el-form-item label="注意事项">
57.                             <el-input type="textarea"  v-model="medicalRecordDto.care" placeholder="请输入注意事项" style="width: 300px;margin-right: 10px" clearable></el-input>
58.                         </el-form-item>
59.                     </el-col>
60.                 </el-row>
61.                 <!-- 第五行 -->
62.                 <el-row>
63.                     <el-col :span="12">
64.                         <el-form-item label="检查结果">
65.                             <el-input type="textarea"  v-model="medicalRecordDto.checkResult" placeholder="请输入检查结果" style="width: 300px;margin-right: 10px" clearable></el-input>
66.                         </el-form-item>
67.                     </el-col>
68.                     <el-col :span="12">
69.                         <el-form-item label="诊断结果">
70.                             <el-input type="textarea"  v-model="medicalRecordDto.diagnose" placeholder="请输入诊断结果" style="width: 300px;margin-right: 10px" clearable></el-input>
71.                         </el-form-item>
72.                     </el-col>
73.                 </el-row>
74.                 <!-- 第六行 -->
75.                 <el-row>
76.                     <el-col :span="12">
77.                         <el-form-item label="处理意见">
78.                             <el-input type="textarea"  v-model="medicalRecordDto.handle" placeholder="请输入处理意见" style="width: 300px;margin-right: 10px" clearable></el-input>
79.                         </el-form-item>
80.                     </el-col>
81.                     <el-col :span="12">
82.                         <el-button-group style="margin: 50px 25px" type="flex" justify="center">
83.                             <el-button type="primary" @click="saveRecord" :icon="Refresh" size="large">暂存</el-button>
84.                             <el-button type="success" @click="commitRecord" :icon="Select" size="large">提交</el-button>
85.                             <el-button type="warning" @click="resetRecord" :icon="Close" size="large">清屏</el-button>
86.                         </el-button-group>
87.                     </el-col>
88.                 </el-row>
89.             </el-form>
90.         </div>
91.     </el-collapse-transition>
93. </el-card>

复制代码

③界说一个按钮，来改变isChoose的值，从而实现控制展示空盒子还是折叠面板。 

1. <el-button type="primary" text @click="isChoose = !isChoose">选择</el-button>

复制代码

   展示效果：
  

结语

以上就是el-empty空盒子组件和Collapse 折叠面板组件的使用，在项目中必要的话可以这么做。
喜欢本篇文章的话，可以留个免费的关注~

 

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。