课程名称：SpringBoot2.X + Vue + UniAPP，全栈开发医疗小程序
课程章节：第三章 使用Vue3.0+SpringBoot实现医护人员管理
课程讲师： 神思者
课程内容：
一、熟悉Vue页面
<el-table
:data="dataList"
border
v-loading="dataListLoading"
:cell-
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 :src="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折叠面板展示医生信息，期待后续学习！