vue中表格行展开

1.添加表格的方法@expand-change="onExpandsRow"

<el-table         :data="tableData"         stripe         border         highlight-current-row         v-loading="listLoading"         ref="table"         @expand-change="onExpandsRow"       >         <el-table-column type="expand">           <template slot-scope="{ row }">             <div class="expand-table" v-if="row.dtl">               <table width="100%" border="0" cellspacing="1" :data="row.dtl">                 <tr>                   <th width="4%" align="center">序号</th>                   <th width="14.5%" align="center">内容编码</th>                   <th>内容</th>                 </tr>                 <tr v-for="(item, index) in row.dtl" :key="index">                   <td align="center">{     
      { index   1 }}</td>                   <td align="center">{     
      { item.checklistId }}</td>                   <td>{     
      { item.content }}</td>                 </tr>               </table>             </div>             <div v-else style="text-align: center">               暂无内容             </div>           </template>         </el-table-column>         <el-table-column           type="index"           label=""           min-width="50"           align="center"         ></el-table-column>               </el-table>

2.从后台返回的表格数据结构包含dtl为null，所以是传入id请求数据

//展示行     onExpandsRow(row, index, e) {       if (row.dtl) {         !index && this.$refs.table.toggleRowExpansion(row);       } else {         this.listLoading = true;         let param = { id: row.siteClassId };         this.$api.请求方法(param)           .then(res => {             this.listLoading = false;             if (res.data.code == 0) {               row.dtl = res.data.data;             }             !index && this.$refs.table.toggleRowExpansion(row);           })           .catch(error => {             this.listLoading = false;           });       }     }