<template>
    <div >
        <div class="reportTop">
         <el-input size="mini" placeholder="输入学生姓名、登录名、身份证号码进行查询"></el-input>
        <el-button type="primary" size="mini" @click="Person">搜索</el-button>
        </div>
<!-- 表格区域 -->
    <div class="reportTab">
          <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="studentName"
      label="学生姓名"
      >
    </el-table-column>
    <el-table-column
    align="center"
      prop="birth"
      label="出生日期"
      width="180">
    </el-table-column>
    
    <el-table-column
    align="center"
      prop="parentTel"
      label="家长手机">
    </el-table-column>
    <el-table-column
    align="center"
      prop="studentTel"
      label="学生手机">
    </el-table-column>
    <el-table-column
    align="center"
      prop="idNum"
      label="身份证号码">
    </el-table-column>
    <el-table-column
    align="center"
      label="操作"
      width="180">
      <template>
          <router-link class="studentEdit" to="" ><span>查看</span> </router-link>
      </template>
    </el-table-column>
     </el-table>
     </div>
     <!-- 分页区域 -->
     <div class="reportPag">
         <el-button>上一页</el-button>
         <div class="fenye"><span>1</span>/<span>5</span></div>
         <el-button>下一页</el-button>
     </div>
    </div>

</template>
<script>
export default {
    data(){
        return{
            tableData: [{
          id: '1',
          loginName: '第一期',
          studentName: 56,
          birth:'2019-9-9',
          parentTel:'156',
          studentTel:'123',
          idNum:'123',
          
        }]
        }
    },
    methods:{
       Person(){
           this.$router.push('/person')
       }
    }
}
</script>
<style lang="less" scoped>
    .reportTop {
        margin-bottom: 20px;
        .el-input {
            width: 25%;
            margin-right: 20px;
        }
    }
    .reportPag {
        position: relative;
       display: flex;
       justify-content: flex-end;
       margin-top: 15px;
      .fenye {
          font-size: 14px;
          position: absolute;
          top: 10px;
          right:105px;
      }
      .el-button {
          margin: 0 15px;
      }
    }
    

</style>