通过设置type="expand"和 Scoped slot 可以开启展开行功能，el-table-column的模板会被渲染成为展开行的内容，展开行可访问的属性与使用自定义列模板时的 Scoped slot相同。
重点：
1.表格绑定的数据 :data="showPolicyListDate"
2.展开列表的方法@expand-change="expandPolicyList"
3.必须要写的：type="expand"和slot-scope="scope"
<el-table :data="showPolicyListDate" @expand-change="expandPolicyList" style="width: 100%" :header-cell-style="{background:'#fafafa'}">
<!-- 详情 -->
<el-table-column type="expand">
<template slot-scope="scope">
<el-form label-position="left" inline style="background: rgba(238, 241, 246, 0.35);">
<div class="ml20" style="padding: 40px 0;">
<div class="tableInfoBox" v-for=" (item,index) in scope.row.expandData.policyHolderInfo" :key="index">
<div style="font-weight:600;margin-bottom:16px;">投保人信息</div>
<el-row>
<el-col :span="6">
<el-form-item label="投保人姓名：">
<span>{{item.applyName?item.applyName:''}}</span>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="性别：">
<span>{{item.applyGender?item.applyGender:''}}</span>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="证件类型：">
<span>{{item.applyIdType?item.applyIdType:''}}</span>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="证件号：">
<span>{{item.applyIdNo?item.applyIdNo:''}}</span>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="6">
<el-form-item label="出生日期：">
<span>{{item.applyBirthDate}}</span>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="证件有效期：">
<span>{{item.applyIdTerm?item.applyIdTerm:''}}</span>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="职业：">
<span>{{item.profession?item.profession:''}}</span>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="联系电话：">
<span>{{item.applyMobile?item.applyMobile:''}}</span>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="联系地址：">
<span>{{item.applyAddres?item.applyAddres:''}}</span>
</el-form-item>
</el-col>
</el-row>
</div>
<div
class="tableInfoBox"
v-for="item in scope.row.expandData.insurHolderInfo"
style="padding-top:20px;"
:key="item.insurIdNo">
<div style="font-weight:600;margin-bottom:16px;">被保人信息</div>
<el-row>
<el-col :span="6">
<el-form-item label="被投保人姓名：">
<span>{{item.insurName?item.insurName:''}}</span>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="性别：">
<span>{{item.insurGender?item.insurGender:''}}</span>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="证件类型：">
<span>{{item.insurIdType?item.insurIdType:''}}</span>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="证件号：">
<span>{{item.insurIdNo?item.insurIdNo:''}}</span>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="6">
<el-form-item label="出生日期：">
<span>{{item.insurBirthDate}}</span>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="证件有效期：">
<span>{{item.insurIdTerm?item.insurIdTerm:''}}</span>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="职业：">
<span>{{item.insurprofession?item.insurprofession:''}}</span>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="联系电话：">
<span>{{item.insurMobile?item.insurMobile:''}}</span>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="联系地址：">
<span>{{item.insurAddres?item.insurAddres:''}}</span>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="与投保人关系：">
<span>{{item.insurRelationToAppnt?item.insurRelationToAppnt:''}}</span>
</el-form-item>
</el-col>
</el-row>
</div>
<div style="padding-top:20px;">
<div style="font-weight:600;margin-bottom:30px;">险种信息</div>
<RiskInfo class="mt10" :riskInfoList="scope.row.expandData.riskInfoList"></RiskInfo>
</div>
</div>
</el-form>
</template>
</el-table-column>
<el-table-column align="center" prop="contNo" label="保单号" width="150"></el-table-column>
<el-table-column align="center" prop="productName" label="险种名称" min-width="180" show-overflow-tooltip></el-table-column>
<el-table-column align="center" prop="appntName" label="投保人" width="150"></el-table-column>
<el-table-column align="center" prop="insuredName" label="被保险人" width="150"></el-table-column>
<el-table-column align="center" prop="amnt" label="保险金额(元)" width="150">
<template slot-scope="{row}">{{row.amnt|formatSemicolon|formatAddWorld}}</template>
</el-table-column>
<el-table-column align="center" prop="sumPrem" label="期缴保费合计(元)" width="150">
<template slot-scope="{row}">{{row.sumPrem|formatSemicolon|formatAddWorld}}</template>
</el-table-column>
<el-table-column align="center" prop="cvalidate" label="生效日期" width="150">
<template slot-scope="{row}">{{row.cvalidate|formatCreateTime}}</template>
</el-table-column>
</el-table>
调用后台接口获取数据：给每一条数据添加一个可展开列表的数据，防止数据为空报错
//联系方式变更详情
async getbussMsgInfor(){
const res = await ContactChanged.getbussMsgInfo({bussNo:this.bussNo})
if(res.result==='0'){
// 已选保单
this.showPolicyListDate = res.campContactInfo.policyList.map(item=>{
return {
...item,
flag:true,
expandData:{
policyHolderInfo:{},
insurHolderInfo:{},
riskInfoList:[]
}
}
})
}else{
this.$message.error(res.resultMessage)
return
}
点击展开调用方法：给每一条数据里面的展开列表赋值
// 展开列表保单基本信息
async expandPolicyList(row){
const res = await ContactChanged.getPolicyDetails({policyNo:row.contNo})
row.expandData.policyHolderInfo = res.applyInfo
row.expandData.insurHolderInfo = res.insurInfo
row.expandData.riskInfoList = res.riskInfo
},
效果：
image.png
image.png
