<template>
<!-- 视图体区 -->
<div>
            <div class="mainTop">
               <el-checkbox >未结课</el-checkbox>
                <span class="check"><el-checkbox >已结课</el-checkbox></span>
                <el-select placeholder="所属学科">
                <el-option > </el-option>
                </el-select>
                <span class="data">开班日期:</span ><el-date-picker
              type="date"
              placeholder="选择日期">
                 </el-date-picker>
                 <el-select placeholder="姓名" class="topName">
                <el-option > </el-option>
                </el-select>
                <el-button type="primary" size="
                mini">搜索</el-button>
                <el-button type="primary" size="
                mini" class="add">添加</el-button>
            </div>
            <!-- 表格区域 -->
             <el-table
    :data="tableData"
    border
    style="width: 100%">
     <el-table-column
      type="selection"
     >
    </el-table-column>
    <el-table-column
      prop="id"
      label="序号"
      width="">
    </el-table-column>
    <el-table-column
      prop="class"
      label="班级名称"
      width="180">
    </el-table-column>
    <el-table-column
      prop="num"
      label="人数"
      width="">
    </el-table-column>
    <el-table-column
      prop="leader"
      label="主负责人"
      width="">
    </el-table-column>
    <el-table-column
      prop="object"
      label="学科">
    </el-table-column>
    <el-table-column
      prop="teacher"
      label="教师">
    </el-table-column>
    <el-table-column
      label="操作">
      <template>
          <router-link class="topEdit" to="/read" >编辑/查看</router-link> |
          <a href="#" class="topDelet">删除</a>
      </template>
    </el-table-column>
     </el-table>
    </div>
</template>
<script>
export default {
    data(){
         return{
          tableData: [{
          id: '1',
          class: '201910月第一期',
          num: 56,
          leader:'南湖恺',
          object:'数学',
          teacher:'黄晓静'

        }
           ]
            }
    }
}
</script>
<style scoped>
.check {
    padding-left: 5px;
    margin-right: 5px;
}
.data {
    margin:0 5px;
    font-size: 14px;
}
.topName {
    margin: 0 5px;
}
.add {
   float: right;
}
.el-table {
    margin-top: 15px;
}
.topEdit{
    color: #666666;
}
.topEdit:hover {
    color: #529BFF
}
.topDelet {
    color:#F5A09D; 
}
</style>