Element UI表格错行

用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>
  <!--分页-->
  <div class="page-box">
    <el-pagination layout="prev, pager, next" :page-count="pageTotal" :current-page="currentPage" @current-change="onChangePage"></el-pagination>
  </div>
 
阅读 4.5k
1 个回答
新手上路,请多包涵

<el-table-column type="index" width="60px"></el-table-column>
1.需要加上width属性;
2.如果你有五列,让其中一列不设置width,这样能好看一些。

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题