为了账号安全,请及时绑定邮箱和手机立即绑定

【备战春招】第19天 ElementPlus折叠面板展示医生信息

标签:
Vue.js

课程名称:SpringBoot2.X + Vue + UniAPP,全栈开发医疗小程序

课程章节:第三章 使用Vue3.0+SpringBoot实现医护人员管理

课程讲师: 神思者

课程内容:

一、熟悉Vue页面

<el-table

    :data="dataList"

    border

    v-loading="dataListLoading"

    :cell-style="{ padding: '3px 0' }"

    style="width: 100%;"

    size="medium"

    @selection-change="selectionChangeHandle"

    @expand-change="expand"

    :row-key="getRowKeys"

    :expand-row-keys="expands"

    @sort-change="orderHandle"

>

    <el-table-column type="expand">

        <template #default="scope">

            <div>

                <table class="content">

                    <tr>

                        <th width="140">身份证号</th>

                        <td width="320">{{ content.pid }}</td>

                        <th width="140">出生日期</th>

                        <td width="320">{{ content.birthday }}</td>

                        <td width="110" rowspan="3" align="center">

                            <el-upload

                                class="avatar-uploader"

                                action="http://localhost:8092/hospital-api/doctor/updatePhoto"

                                :headers="{ token: token }"

                                with-credentials="true"

                                :on-success="updatePhotoSuccess"

                                :on-error="updatePhotoError"

                                :show-file-list="false"

                                :data="{ doctorId: scope.row.id }"

                            >

                                <el-image style="width: 100px; height: 100px" :class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="content.photo" :fit="fit">

                                    <template #error>

                                        <div class="error-img">

                                            <el-icon><Picture /></el-icon>

                                        </div>

                                    </template>

                                </el-image>

                            </el-upload>

                        </td>

                    </tr>

                    <tr>

                        <th>医师编号</th>

                        <td>{{ content.uuid }}</td>

                        <th>入职日期</th>

                        <td>{{ content.hiredate }}</td>

                    </tr>

                    <tr>

                        <th>电子信箱</th>

                        <td>{{ content.email }}</td>

                        <th>备注信息</th>

                        <td>{{ content.remark }}</td>

                    </tr>

                    <tr>

                        <th>标签描述</th>

                        <td>

                            <el-tag v-for="one of content.tag">{{ one }}</el-tag>

                        </td>

                        <th>家庭住址</th>

                        <td colspan="2">{{ content.address }}</td>

                    </tr>

                    <tr>

                        <th>介绍信息</th>

                        <td colspan="4">{{ content.description }}</td>

                    </tr>

                </table>

            </div>

        </template>

    </el-table-column>

    ……

</el-table>

二、编写JavaScript代码

在模型层中声明了getRowKeys()函数,用来规定表格中每一行的特征标志是这行医生记录的主键值。

getRowKeys(row) {

    return row.id;

},

在模型层中还有一个数组变量expands: [],如果我们想要某一行记录的折叠面板展开,就把这一行记录的主键值放到expands数组里面;如果你想收起某行记录的折叠面板,在expands数组里面删除改行记录的主键值即可。

用户点击某一行医生记录触发的回调函数是expand(),该函数的定义如下:

expand: function(row, expandedRows) {

    let that = this;

    if (expandedRows.length > 0) {

        that.expands = [];

        that.expands.push(row.id);

        let data = {

            id: row.id

        };

        that.$http('/doctor/searchContent', 'POST', data, false, function(resp) {

            that.content.id = row.id;

            that.content.photo = `${that.$minioUrl}${resp.photo}?random=${Math.random()}`;

            that.content.pid = resp.pid;

            that.content.birthday = resp.birthday;

            that.content.uuid = resp.uuid;

            that.content.hiredate = resp.hiredate;

            that.content.email = resp.email;

            that.content.remark = resp.remark;

            that.content.tag = resp.tag;

            that.content.address = resp.address;

            that.content.description = resp.description;

        });

        

    } else {

        that.expands = [];

    }

},

为了更好理解expand()函数两个参数的作用,我们来看具体的例子。如果现在我们点击某个医生记录。expand()回调函数的第一个参数是点击的医生记录,第二个参数是数组里面记录的是等待展开的医生记录。

https://img1.sycdn.imooc.com//63fb040c0001660e15500159.jpg

现在已经存在展开的面板,我们点击另一个医生记录,这时候expand()函数的第一个参数依然是点击的医生记录,第二个参数的数据里面包含了两条记录,一个是已经展开的面板和等待展开的面板记录。

https://img1.sycdn.imooc.com//63fb042a00013dd915840190.jpg

https://img1.sycdn.imooc.com//63fb0457000140dc17400875.jpg

课程收获:通过视频加文档结合的方式,学习了ElementPlus折叠面板展示医生信息,期待后续学习!
点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消