javascript - Element UI table wrong row
When developing with Element UI and Vue, change the diaolog component in Element UI into its own component. Use the table component in Element UI in this component. I found that sometimes the rendering will be wrong. The reason is currently found. It's because of the radio button I added, but I don't know how to solve it. As shown in the picture below, please ask the master to answer your questions
<!--diaolog table-->
<el-table :data="gridData" height="360" highlight-current-row style="width:100%" fit>
<el-table-column label="" width="50">
<template scope="scope">
<el-radio :label="gridData[scope.$index].classId" v-model="radio" @change.native="getCurrentRow(scope.$index)"></el-radio>
</template>
</el-table-column>
<el-table-column prop="className" label="班级名称" width="220"></el-table-column>
<el-table-column prop="gradeSubject" label="年级/科目" width="150"></el-table-column>
<el-table-column prop="teachingTime" label="授课时段" width=""></el-table-column>
<el-table-column prop="teacher" label="任课老师" width="100"></el-table-column>
<el-table-column prop="classTypeName" label="班型" width=""></el-table-column>
</el-table>
<!--分页-->
<p class="page-box">
<el-pagination layout="prev, pager, next" :page-count="pageTotal" :current-page="currentPage" @current-change="onChangePage"></el-pagination>
</p>
