element前端页面

<template>

  <div>

  <!-- 搜索栏 -->

  <el-card id="search">

    <el-input v-model="searchModel.name" placeholder="学生姓名"></el-input>

    <el-input v-model="searchModel.dept" placeholder="学习院系"></el-input>

    <el-input v-model="searchModel.id" placeholder="学号"></el-input>

    <el-button @click="getStudentList" type="primary" plain>查询</el-button>

    <el-button type="primary" plain>新建</el-button>

  </el-card>

  <!-- 结果列表

  表格的数据源是数组studentList

  -->

  <el-card>

    <el-table

      :data="studentList"

      stripe

      style="width: 100%">

      <el-table-column

        type="index"

        label="序号"

        width="80">

      </el-table-column>

      <el-table-column

        prop="id"

        label="学号"

        width="180">

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

        prop="name"

        label="姓名"

        width="180">

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

        prop="age"

        label="年龄"

        width="180">

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

        prop="sex"

        label="性别"

        width="180">

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

        prop="dept"

        label="院系"

        width="180">

      </el-table-column>

      <el-table-column

        prop="adrr"

        label="家庭地址"

        width="280">

      </el-table-column>

      <el-table-column

        label="操作"

        width="180">

      </el-table-column>

    </el-table>

     

  </el-card>

  <!-- 分页组件

  page-size:每页显示多少条数据

  显示中文要在main.js中改为import locale from 'element-ui/lib/locale/lang/zh-CN'

  -->

  <el-pagination

        @size-change="handleSizeChange"

        @current-change="handleCurrentChange"

        :current-page="searchModel.pageNo"

        :page-sizes="[5, 10, 20, 50]"  

        :page-size="searchModel.pageSize"

        layout="total, sizes, prev, pager, next, jumper"

        :total="total">

  </el-pagination>

 

  <!--  -->

    </div>

  </template>

  <script>

  // import userApi from "@/api/studentManage";

  export default {

    data(){

      return{

        total:0,

        searchModel: {

        pageNo:1,

        pageSize:10

        },

        studentList:[]

      }

    }

    // methods:{

    //   handleSizeChange(){

    //   },

    //   handleCurrentChange(){

    //   },

    //   getStudentList(){

    //     studentApi.getStudentList(this.searchModel).then(response=>{

    //       this.studentList=response.data.rows;

    //       this.total=response.data.total;

    //     });

    //   }

    // },

    // created(){

    //   this.getStudentList();

    // }

  }

  </script>

  <style>

  #search .el-input{

      width:300px;   /*调整搜索框的宽度*/

      margin-right:10px; /*调整搜索框的右外边距*/

  }

  </style>