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

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

直接复制下面的代码:

html 复制代码
<el-empty description="description" />

展示效果:

还可以自定义文字描述:

html 复制代码
<el-empty description="暂未选择患者"/>

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

复制下面的代码:

html 复制代码
<template>
  <div>
    <el-button @click="show = !show">Click Me</el-button>

    <div style="margin-top: 20px">
      <el-collapse-transition>
        <div v-show="show" style="height: 400px">
          <div class="transition-box">el-collapse-transition</div>
          <div class="transition-box">el-collapse-transition</div>
        </div>
      </el-collapse-transition>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const show = ref(true)
</script>

<style>
.transition-box {
  margin-bottom: 10px;
  width: 200px;
  height: 100px;
  border-radius: 4px;
  background-color: #409eff;
  text-align: center;
  color: #fff;
  padding: 40px 20px;
  box-sizing: border-box;
  margin-right: 20px;
}
</style>

效果展示:

代码解读:

①自定义变量show

②v-show="show"这个属性,控制着折叠面板的显示。

③添加一个按钮,一点击就修改show的值,从而控制折叠面板是否显示。

三.综合练习

题目要求:

刚打开页面时,我们不显示患者病历表单,而是展示空盒子(表示门诊医生暂未选择看诊的患者)。等到医生选择了某个患者后,才会展示出患者病历表单。
代码大致思路:

①先定义变量isChoose ,控制病历表单是否显示

javascript 复制代码
const isChoose = ref(false);

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

html 复制代码
<!-- 卡片(患者病历表单填写) -->
<el-card  style="width:976px;" shadow="hover" >
    <!-- 情况1:一开始显示空盒子 -->
    <el-empty description="暂未选择患者" v-show="!isChoose" />
    <!-- 情况2:选择某个待诊患者后,显示出病例表单 -->
    <el-collapse-transition>
        <div v-show="isChoose"  style="height:600px;width:100%;">
            <el-form :model="medicalRecordDto" label-position="top">
                <!-- 第一行 -->
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="主诉">
                            <el-input type="textarea"  v-model="medicalRecordDto.chiefComplaint" placeholder="请输入主诉" style="width: 300px;margin-right: 10px" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="现病史">
                            <el-input type="textarea"  v-model="medicalRecordDto.present" placeholder="请输入患者现病史" style="width: 300px;margin-right: 10px" clearable></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <!-- 第二行 -->
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="现病治疗情况">
                            <el-input type="textarea"  v-model="medicalRecordDto.presentTreat" placeholder="请输入现病治疗情况" style="width: 300px;margin-right: 10px" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="既往史">
                            <el-input type="textarea"  v-model="medicalRecordDto.history" placeholder="请输入既往史" style="width: 300px;margin-right: 10px" clearable></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <!-- 第三行 -->
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="过敏史">
                            <el-input type="textarea"  v-model="medicalRecordDto.allergy" placeholder="请输入过敏史" style="width: 300px;margin-right: 10px" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="体格检查">
                            <el-input type="textarea"  v-model="medicalRecordDto.physique" placeholder="请输入体格检查" style="width: 300px;margin-right: 10px" clearable></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <!-- 第四行 -->
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="检查建议">
                            <el-input type="textarea"  v-model="medicalRecordDto.proposal" placeholder="请输入检查建议" style="width: 300px;margin-right: 10px" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="注意事项">
                            <el-input type="textarea"  v-model="medicalRecordDto.care" placeholder="请输入注意事项" style="width: 300px;margin-right: 10px" clearable></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <!-- 第五行 -->
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="检查结果">
                            <el-input type="textarea"  v-model="medicalRecordDto.checkResult" placeholder="请输入检查结果" style="width: 300px;margin-right: 10px" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="诊断结果">
                            <el-input type="textarea"  v-model="medicalRecordDto.diagnose" placeholder="请输入诊断结果" style="width: 300px;margin-right: 10px" clearable></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <!-- 第六行 -->
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="处理意见">
                            <el-input type="textarea"  v-model="medicalRecordDto.handle" placeholder="请输入处理意见" style="width: 300px;margin-right: 10px" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-button-group style="margin: 50px 25px" type="flex" justify="center">
                            <el-button type="primary" @click="saveRecord" :icon="Refresh" size="large">暂存</el-button>
                            <el-button type="success" @click="commitRecord" :icon="Select" size="large">提交</el-button>
                            <el-button type="warning" @click="resetRecord" :icon="Close" size="large">清屏</el-button>
                        </el-button-group>
                    </el-col>
                </el-row>
            </el-form>
        </div>
    </el-collapse-transition>

</el-card>

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

html 复制代码
<el-button type="primary" text @click="isChoose = !isChoose">选择</el-button>

展示效果:

结语

以上就是el-empty空盒子组件和Collapse 折叠面板组件的使用,在项目中需要的话可以这么做。

喜欢本篇文章的话,可以留个免费的关注~

相关推荐
爱吃烤鸡翅的酸菜鱼9 分钟前
IDEA高效开发:Database Navigator插件安装与核心使用指南
java·开发语言·数据库·编辑器·intellij-idea·database
然我18 分钟前
不用 Redux 也能全局状态管理?看我用 useReducer+Context 搞个 Todo 应用
前端·javascript·react.js
前端小巷子23 分钟前
Web 实时通信:从短轮询到 WebSocket
前端·javascript·面试
神仙别闹26 分钟前
基于C#+SQL Server实现(Web)学生选课管理系统
前端·数据库·c#
web前端神器33 分钟前
指定阿里镜像原理
前端
枷锁—sha37 分钟前
【DVWA系列】——CSRF——Medium详细教程
android·服务器·前端·web安全·网络安全·csrf
枷锁—sha39 分钟前
跨站请求伪造漏洞(CSRF)详解
运维·服务器·前端·web安全·网络安全·csrf
心情好的小球藻1 小时前
Python应用进阶DAY9--类型注解Type Hinting
开发语言·python
群联云防护小杜1 小时前
深度隐匿源IP:高防+群联AI云防护防绕过实战
运维·服务器·前端·网络·人工智能·网络协议·tcp/ip
惜.己1 小时前
使用python读取json数据,简单的处理成元组数组
开发语言·python·测试工具·json