element-ui table 自定义某一列表头

229 阅读1分钟
<el-table
  size="mini"
  :data="tableData">
  <el-table-column
    label="名称"
    prop="name">
  </el-table-column>
  <el-table-column
    label="开始时间"
    prop="startTime" width="150">
  </el-table-column>
  <el-table-column
    label="结束时间"
    prop="endTime" width="150">
  </el-table-column>
  <el-table-column
    label="总人数"
    prop="participantsNumber">
  </el-table-column>
  <el-table-column
    label="未参加人数"
    prop="noExamUserNumber">
  </el-table-column>
  <el-table-column
    label="发布状态">
    <template scope="scope">
      <div class="published" v-if="scope.row.isPublished">已发布</div>
      <div class="unpublished" v-else>未发布</div>
    </template>
  </el-table-column>
  <el-table-column>

    <!-- 自定义此列的表头 -->
    <template slot="header" scope="scope">
      <el-checkbox v-if="allId.length > 0" :indeterminate="isIndeterminate" v-model="checkAll.isChecked" @change="handleCheckAllChange"><span :id="scope" class="color-white">全选</span></el-checkbox>
      <span v-else>状态</span>
    </template>

    <!-- 自定义此列的信息 -->
    <template scope="scope">
      <div v-if="scope.row.isPublished">已发布</div>
      <el-checkbox v-else :label="scope.row.id" v-model="scope.row.checked.isChecked"
                @change="getCurrentRow(scope.row, scope.$index)">选择</el-checkbox>
    </template>

  </el-table-column>
</el-table>