关于el-table可展开行实现懒加载的方案

场景：

        一个流程记录，以表格的形式展示。点击展开表格的某一行，可以看到该流程的详细记录。但是，详细记录数据独立于表格数据，在还没有展开这一行的时候就不去请求这一行的详细数据，以便加快网络请求的速度。

思路：

        使用el-table组件，加一个属性列，设置type为expand。其中的内容绑定的数据为表格数据这一行的某个字段。

        在点击展开某一行的时候，发请求拿到这一行展开所需要的数据绑定在这一行的某个字段上，再次点击的时候判断这个字段是否有值，如果有值，则不再发送请求，以此减少请求次数。

  代码：

<el-table @expand-change="flyCodeExecuter" row-key="id" :data="flowNodes" style="width: 100%">
<el-table-column type="expand">
<template slot-scope="props">
<!– {{ props.row.id }} –>
<el-collapse v-model="activeNames" @change="handleChange" v-loading="checkListLoading">
<el-collapse-item :title="outItem.name" name="1" v-for="(outItem, index) in props.row.resultList">
<div v-for="inItem in outItem.children" style="margin: 15px 15px;">
<div class="top" style="margin-bottom: 5px;">
<span style="margin-right: 10px;">{{ inItem.item }}:</span>
<el-radio-group v-model="inItem.result">
<el-radio label="1">通过</el-radio>
<el-radio label="0">不通过</el-radio>
</el-radio-group>
</div>
<div class="bottom">
<el-input type="textarea" :rows="2" placeholder="请输入理由" v-model="inItem.discription">
</el-input>
</div>
</div>
</el-collapse-item>
</el-collapse>
</template>
</el-table-column>
<el-table-column label="流程进度" prop="nodeName"></el-table-column>
<el-table-column label="审批时间" prop="approvalTime"></el-table-column>
<el-table-column label="处理结果" prop="approvalResult"></el-table-column>
<el-table-column label="审批意见" prop="approvalComment"></el-table-column>
</el-table>
flyCodeExecuter(row, expandedRows) {
if(row.resultList){
return;
}
this.checkListLoading=true;
getApproveRecord(row.id).then(res => {
row.resultList=res.data.checkResultList||'无值';
this.checkListLoading=false;
})
}