table展开行

通过设置type="expand"和 Scoped slot 可以开启展开行功能，el-table-column的模板会被渲染成为展开行的内容，展开行可访问的属性与使用自定义列模板时的 Scoped slot相同。

重点：

1.表格绑定的数据 :data="showPolicyListDate"

2.展开列表的方法@expand-change="expandPolicyList"

3.必须要写的：type="expand"和slot-scope="scope"

调用后台接口获取数据：给每一条数据添加一个可展开列表的数据，防止数据为空报错

//联系方式变更详情
    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