javascript - Element UI table wrong row

Question

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>
 

Answer 1

<el-table-column type="index" width="60px"></el-table-column>
1. You need to add the width attribute;
2. If you have five columns, let One of the columns does not have a width set so that it looks better.

--> You can try it. ^_^