javascript - Element UI表格错行

Question

用Element UI和Vue开发时，将Element UI中的diaolog组件改成自己的组件，在这个组件中使用Element UI中的表格组件，发现渲染的时候有的时候会错行，目前发现原因是我加的单选按钮radio的原因，但是不知道如何解决。如下图所示，求大神答疑解惑

<!--diaolog表格-->

  <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.需要加上width属性；
2.如果你有五列，让其中一列不设置width，这样能好看一些。

--> 你可以试一下。^_^