javascript – Falsche Zeile der Element-UI-Tabelle

Question

Bei der Entwicklung mit Element UI und Vue habe ich die Dialogkomponente in Element UI in meine eigene Komponente geändert. In dieser Komponente habe ich festgestellt, dass das Rendern manchmal schief ging Ich bin der Grund für das Hinzufügen des Optionsfelds, aber ich weiß nicht, wie ich es lösen soll. Bitten Sie den Meister, wie im Bild unten gezeigt, Ihre Fragen zu beantworten

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

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