<template>
    <div>
        <!--头部区域 -->
        <div class="studentTop">
        <el-input size="mini" 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="addStu">添加</el-button>
        </div>
        <!-- 表格区域 -->
        <div class="stuTab">
             <el-table
    :data="tableData1.slice((currentPage-1)*pagesize,currentPage*pagesize)"
    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="">{{id}}
    </el-table-column>
    <el-table-column
    align="center"
      prop="loginName"
      label="登录名"
      width="">{{leader}}
    </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="num"
      label="班级数量">
    </el-table-column>
    <el-table-column
    align="center"
      prop="tel"
      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> |
          <a href="#" class="studentDelet">删除</a>
      </template>
    </el-table-column>
    
     </el-table>
     <!-- 分页功能 -->
     <div class="fenPage">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[1,2,3,5]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
      </div>
     </div>
    </div>
</template>
<script>
//导入数据
const Data=require('../../1.json')
export default {
    data(){
        return {
            currentPage:1,
            pagesize:5,
            tableData1: [
        //  { id: '1',
        //   loginName: '第一期',
        //   studentName: 56,
        //   parentName:'南湖恺',
        //   birth:'数学',
        //   num:'123',
        //   tel:'123',
        //   idNum:'123'}
        ],
       total:6
        }
    },
    created(){
      this.add()
    },
    methods:{
      
    //获取数据
    add(){
      this.tableData1=Data
      this.total=this.tableData1.length
      console.log(this.tableData1)
    },
    
  //监听每页的条数变化
    handleSizeChange(size) {
      this.pagesize = size
     this.add()
    },
    //监听当前页的变化
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage
      this.add()
    },
    }
    
      
}
</script>
<style scoped lang="less">
.studentTop {
    position: relative;
    margin-bottom: 20px;
    .el-input {
    width: 27%;
    margin:0 10px;
    }
    .addStu {
      position: absolute;
      top: 0;
      right: 0;
    
    }
}
.stuTab{
     span {
         color: #529BFF;
     }
     .studentDelet {
         color: #EE443E;
     }
     
}
.fenPage {
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
}



</style>