<template>
    <div>
        <!--头部区域 -->
        <div class="teacherTop">
         <el-select placeholder="所属学科">
           <el-option > </el-option>
        </el-select>
        <el-input  placeholder="输入名字或登录名查询"></el-input>
        <el-button type="primary" size="mini">搜索</el-button>
        <el-button  size="mini">导入</el-button>
        <el-button  size="mini">导出</el-button>
        <el-button type="primary" size="mini" class="addTea">添加</el-button>
        </div>
        <!-- 表格区域 -->
        <div class="teaTab">
             <el-table
    :data="tableData"
    border
    style="width: 100%"
    :header-cell-style="{background:'#FAFAFA'}">
     <el-table-column
     align="center"
      type="selection"

     >
    </el-table-column>
    <el-table-column
    align="center"
      prop="id"
      label="序号"
      width="">
    </el-table-column>
    <el-table-column
    align="center"
      prop="loginName"
      label="登录名"
      width="">
    </el-table-column>
    <el-table-column
    align="center"
      prop="teacherName"
      label="教师姓名"
      >
    </el-table-column>
    <el-table-column
    align="center"
      prop="birth"
      label="出生日期"
      width="180">
    </el-table-column>
    <el-table-column
    align="center"
      prop="gender"
      label="性别">
    </el-table-column>
    <el-table-column
    align="center"
      prop="tel"
      label="手机号">
    </el-table-column>
    <el-table-column
    align="center"
      prop="object"
      label="科目">
    </el-table-column>
    <el-table-column
    align="center"
      label="操作"
      width="180">
      <template>
          <router-link class="teacherEdit" to="/read" ><span>查看</span> | 修改 </router-link> |
          <a href="#" class="teacherDelet">删除</a>
      </template>
    </el-table-column>
     </el-table>
     </div>
    </div>
</template>
<script>
export default {
    data(){
        return {
            tableData: [{
          id: '1',
          loginName: '第一期',
          teacherName: 56,
          parentName:'南湖恺',
          birth:'数学',
          gender:'123',
          tel:'123',
          object:'数学'
        }]
        }
    }
}
</script>
<style scoped lang="less">
.teacherTop {
    margin-bottom: 20px;
    .el-select {
        width: 12%;
    };
    .el-input {
    width: 17%;
    margin:0 10px;
    }
    .addTea {
        margin-left:530px; 
    }
}
.teaTab{
    
     span {
         color: #529BFF;
     }
     .teacherDelet {
         color: #EE443E;
     }
     
}



</style>