Vue + element-ui 实现 分页 重置 搜索 时间处理

项目需求

• 实现学生管理页面的json数据渲染
• 实现创建时间的处理
• 实现分页功能
• 根据学员状态，进行搜索
• 点击重置恢复渲染全部学员
• 根据学员名称进行搜索
• 根据手机号进行搜索
• 实现user路由下的二级路由跳转 “学员管理” 和 “讲师管理”
  效果图如下:
  

用element-ui实现布局:

<template>
    <div>

        <div class="student_top">
                <el-select v-model="value" @change="changeValue"   placeholder="请选择">
                    <el-option
                            v-for="(item,index) in options"
                            :key="index"
                            :value="item.value">
                    </el-option>
                </el-select>
            <el-input v-model="name" placeholder="请输入姓名" class="input"></el-input>
            <el-input v-model="mobile" placeholder="请输入手机号"  class="input"></el-input>
            <el-button type="primary" icon="el-icon-search" @click="searchBtn">搜索</el-button>
            <el-button type="primary" @click="resetDate">重置 </el-button>
        </div>

        <el-table
                border  stripe
                :data="tableData"
                style="width: 100%">
            <el-table-column
                    prop="nickname"
                    label="学生名称"
                    width="180">
<!--                    插入图片-->
                <template slot-scope="scope">
                    <img :src="scope.row.avatar" style="width:30px"/>
                    <span style="margin-left: 10px">{{ scope.row.nickname }}</span>
                </template>
<!--                    插入图片-->
            </el-table-column>
            <el-table-column
                    prop="mobile"
                    label="手机号"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="zt"
                    label="状态">
            </el-table-column>
            <el-table-column
                    prop="data"
                    label="创建时间">
            </el-table-column>

        </el-table>

<!--        //分页-->
        <el-pagination
                background
                layout="prev, pager, next"
                :total="19"
                :page-size="5"
                @current-change="currentChange">
        </el-pagination>
    </div>
</template>

script:

<script>
    import axios from 'axios';
    export default {
        name: "Student",
        data(){
            return{
                tableData:[],
                options: [{value: '禁用',}, { value: '启用',}],
                name:'',  // 名称
                mobile:'', //手机号
                value:'',  //下拉菜单
                current:5, // 默认显示的数量
            }
        },
        methods:{
            //改变下拉菜单数据的改变  启用  禁用状态
              changeValue(){
                 this.tableData = [];
                 this.sourceData.forEach(ele=>{
                     if(ele.zt === this.value){
                         this.tableData.push(ele)
                     }
                 })
             },
             //点击搜索
            searchBtn(){
                  //姓名搜索
                if(this.name !==''){
                      this.tableData = [];
                      this.sourceData.forEach(ele=>{
                          if(ele.nickname.includes(this.name)){
                              this.tableData.push(ele)
                          }
                      })
                  }
                  //手机号搜索
                if(this.mobile !==''){
                    this.tableData = [];
                    this.sourceData.forEach(ele=>{
                        if(ele.mobile.includes(this.mobile)){
                            this.tableData.push(ele)
                        }
                    })
                }

            },
            //点击重置
            resetDate(){
                this.name='';
                this.mobile='';
                this.value='';
                this.tableData= this.sourceData
            },
            //点击换页
            currentChange(page){
                // window.console.log(page);
                var maxRange =  this.current*page;
                var minRange = this.current*(page-1);
                this.tableData = [];
                this.sourceData.forEach((element,index)=>{
                    if(index <= maxRange && index > minRange){
                        this.tableData.push(element)
                    }
                })
            }
        },
        mounted() {
            axios.get('./list.json').then(res=>{
                res.data.forEach(ele=>{
                    // 转化为时间戳
                    let data = new Date(parseInt(ele.created_at)*1000);
                    // 对时间戳做处理
                    ele.data = `${data.getFullYear()}年${data.getMonth()+1}月${data.getDay()}日`;
                    ele.zt = ele.status == 0 ? '禁用' :'启用';
                });
                //保存最原始的数据
                this.sourceData = res.data;
                //分页  默认显示前五条
                this.sourceData.forEach((ele,index)=>{
                    if(index < this.current){
                        this.tableData.push(ele)
                    }
                })
            }).catch(err=>{
                console.log(err)
            })
        }
    }
</script>

css:

<style scoped>
    .input {
        width: 200px;
    }
.student_top {
    width: 100%;
    display: flex;
    justify-content: space-around;
    flex:1;
}
</style>