网站建设好销售吗建立公司网站视频
场景：
一个流程记录，以表格的形式展示。点击展开表格的某一行，可以看到该流程的详细记录。但是，详细记录数据独立于表格数据，在还没有展开这一行的时候就不去请求这一行的详细数据，以便加快网络请求的速度。
思路：
使用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;})}