记录一个bug

前端框架用的是Vue.js，列表用的JQuery.DataTable

报错信息如下

vue@2.6.12:6 TypeError: Cannot read properties of undefined (reading 'mData')
    at HTMLTableCellElement.<anonymous> (jquery.dataTables.min.js:90)
    at Function.each (jquery.min.js:2)
    at k.fn.init.each (jquery.min.js:2)
    at HTMLTableElement.<anonymous> (jquery.dataTables.min.js:90)
    at Function.each (jquery.min.js:2)
    at k.fn.init.each (jquery.min.js:2)
    at k.fn.init.n [as dataTable] (jquery.dataTables.min.js:83)
    at k.fn.init.h.fn.DataTable (jquery.dataTables.min.js:166)
    at wn.<anonymous> (Index:1150)
    at Array.<anonymous> (vue@2.6.12:6)

这报错信息看得头晕。。。

不过可以点那个(jquery.dataTables.min.js:90)报错信息进去

然后点{}调整代码格式

然后调试，发现table的tbody列比thead多，然后c就undefined了（如下图）

然后就可以去我们自己的代码里面找了

table HTML如下

                        <table id="list" class="table table-bordered text-nowrap dataTableList2">
                            <thead>
                                <tr>
                                    <th></th>
                                    <th>@Resx.CMM.Unit</th>
                                    <th>@Resx.CMM.PositionName</th>
                                    <th>@Resx.CMM.EmployeeNo</th>
                                    <th>@Resx.CMM.EmployeeName</th>

                                    <th>@Resx.CMM.InjuryCaseNo</th>
                                    <th v-if="IsHRIS">@Resx.CMM.PeriodicalPayment</th>
                                    <th v-if="IsHRIS">@Html.Raw(@Resx.CMM.PermenantInjury)</th>
                                    <th v-if="IsHRIS">@Resx.CMM.MedicalClaim</th>
                                    <th v-if="IsHRIS">@Html.Raw(@Resx.CMM.Reimbursement)</th>
                                    <th>@Resx.CMM.LegalCase</th>

                                    <th>@Resx.CMM.InjuryNature</th>
                                    <th>@Resx.CMM.InjuryPart</th>
                                    <th>@Resx.CMM.InjuryReason</th>
                                    <th>@Resx.CMM.DateOfInjury</th>
                                    <th>@Resx.CMM.RegistraionDate</th>
                                    <th>@Resx.CMM.Status</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="item in detail.CMMRecords" :key="item.CMMId">
                                    <td><a class="btn btn-primary" @@click="Edit(item.CMMId)"><i style="color:white" class="fas faBtn fa-edit"></i> </a></td>
                                    <td>{{item.UnitDisplayName}}</td>
                                    <td>{{item.PositionDisplayName}}</td>
                                    <td>{{item.p_empno}}</td>
                                    <td>{{item.EmployeeName}}</td>

                                    <td>{{item.InjuryCaseNo}}</td>
                                    <td>{{item.PeriodicalPayment}}</td>
                                    <td>{{item.PermIncapAmt}}</td>
                                    <td>{{item.MedicalClaim}}</td>
                                    <td>{{item.ReimbursementAmt}}</td>
                                    <td>{{item.LegalCase}}</td>

                                    <td>{{item.InjuryNature}}</td>
                                    <td>{{item.InjuryPart}}</td>
                                    <td>{{item.InjuryReason}}</td>
                                    <td>{{DateFormat(item.InjuryDate)}}</td>
                                    <td>{{DateFormat(item.RegisterDate)}}</td>
                                    <td>{{item.StatusName}}</td>
                                </tr>
                            </tbody>
                        </table>

然后发现thead多了几个v-if="IsHRIS"，而tbody没有，然后上面那个图那就会undefined

补上就好了