课程名称：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()回调函数的第一个参数是点击的医生记录，第二个参数是数组里面记录的是等待展开的医生记录。

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

课程收获：通过视频加文档结合的方式，学习了ElementPlus折叠面板展示医生信息，期待后续学习！