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

width="60px">
1.需要加上width屬性；
2.如果你有五列，讓其中一列不設定width，這樣能好看一些。

--> 你可以試試看。 ^_^