关于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;
})
}
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]